2016-09-27 16 views
0

valueAxesSettingsに追加しても、それでもうまくいかない場合は、valueAxesSettingsvalueAxesに選択してください。 さらに、参考文献としてvalueAxesSettingsvalueAxesの違いは?If you change a property after the chart is initialized, you should call stockChart.validateNow() method in order for it to work.?どういう意味ですか?Amchartsのガイド

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>My first stock chart</title> 
<link rel="stylesheet" href="amcharts/style.css" type="text/css"> 

<script src="//www.amcharts.com/lib/3/amcharts.js"></script> 
<script src="//www.amcharts.com/lib/3/serial.js"></script> 
<script src="//www.amcharts.com/lib/3/themes/light.js"></script> 
<script src="//www.amcharts.com/lib/3/amstock.js"></script> 

<style> 
    #chartdiv { 
     width: 100%; 
     height: 500px; 
     font-size: 11px; 
    } 
</style> 

<script type="text/javascript"> 
     AmCharts.makeChart("chartdiv", { 
      "type": "stock", 
      "dataDateFormat": "YYYY-MM-DD", 
      "dataSets": [ { 
       "dataProvider": [ { 
        "date": "2011-06-01", 
        "val": 10 
       }, { 
        "date": "2011-06-02", 
        "val": 11 
       }, { 
        "date": "2011-06-03", 
        "val": 12 
       }, { 
        "date": "2011-06-04", 
        "val": 11 
       }, { 
        "date": "2011-06-05", 
        "val": 10 
       }, { 
        "date": "2011-06-06", 
        "val": 11 
       }, { 
        "date": "2011-06-07", 
        "val": 13 
       }, { 
        "date": "2011-06-08", 
        "val": 14 
       }, { 
        "date": "2011-06-09", 
        "val": 17 
       }, { 
        "date": "2011-06-10", 
        "val": 13 
       } ], 
       "fieldMappings": [ { 
        "fromField": "val", 
        "toField": "value" 
       } ], 
       "categoryField": "date" 
      } ], 

      "panels": [ { 

       "legend": {}, 

       "stockGraphs": [ { 
        "id": "graph1", 
        "valueField": "value", 
        "type": "line", 
        "title": "MyGraph", 
        "fillAlphas": 0 
       } ] 
      } ], 

      "panelsSettings": { 
       "startDuration": 1 
      }, 

      "categoryAxesSettings": { 
       "dashLength": 5 
      }, 

      "valueAxesSettings": { 
       "dashLength": 13, 
       "guides": { 
        "value": 10, 
        "tovalue": 12, 
        "lineColor": "#CC0000", 
        "lineAlpha": 1, 
        "fillAlpha": 0.2, 
        "fillColor": "#CC0000", 
        "dashLength": 2, 
        "inside": true, 
       } 
      }, 

      "chartScrollbarSettings": { 
       "graph": "graph1", 
       "graphType": "line", 
       "position": "bottom" 
      }, 

      "chartCursorSettings": { 
       "valueBalloonsEnabled": true 
      }, 

      "periodSelector": { 
       "periods": [ { 
        "period": "DD", 
        "count": 1, 
        "label": "1 day" 
       }, { 
        "period": "DD", 
        "selected": true, 
        "count": 5, 
        "label": "5 days" 
       }, { 
        "period": "MM", 
        "count": 1, 
        "label": "1 month" 
       }, { 
        "period": "YYYY", 
        "count": 1, 
        "label": "1 year" 
       }, { 
        "period": "YTD", 
        "label": "YTD" 
       }, { 
        "period": "MAX", 
        "label": "MAX" 
       } ] 
      } 
     }); 
</script> 
</head> 
<body> 
<div id="chartdiv"></div> 
</body> 
</html> 
+0

グラフが初期化された後にプロパティを変更するときは、新しい(変更された)設定を使用してグラフが再描画されるようにvalidateNow()を呼び出す必要があります。 validateData()も呼び出しますが、オプションです。 – Anurag

+0

@Anuragのコメントを展開するには、グラフのデータを変更するときに 'validateData'を使います。 'validateNow'は、最初のパラメータをtrueに設定しない限り、デフォルトでそれを処理しません。 'validateNow(true、false)'は 'validateData()'と同等です。 – xorspark

答えて

1

valueAxesSettingsvalueAxesのグローバル版です - あなたはvalueAxesSettingsで設定したものは、すべての株式のパネルvalueAxesオブジェクトに適用されます。あなたは、パネルvalueAxesの一つで特定の設定を上書きするか、設定したい場合は、パネルの内側にvalueAxesを設定することができます。

"panels": [{ 
    "valueAxes":[{ 
    //settings specific to this panel 
    }], 
    // ... 
}, { 
    "valueAxes": [{ 
    //settings specific to this panel 
    }] 
} 

guidesプロパティは配列です。これを単一のオブジェクトとして設定していますが、これは間違っています。また、プロパティはtoValueと呼ばれ、「tovalue」ではなく、ケースが重要です。

"valueAxesSettings": { 
    "dashLength": 13, 
    "guides": [{ 
     "value": 10, 
     "toValue": 12, 
     "lineColor": "#CC0000", 
     "lineAlpha": 1, 
     "fillAlpha": 0.2, 
     "fillColor": "#CC0000", 
     "dashLength": 2, 
     "inside": true 
    }] 
    }, 

デモ:

AmCharts.makeChart("chartdiv", { 
 
    "type": "stock", 
 
    "dataDateFormat": "YYYY-MM-DD", 
 
    "dataSets": [{ 
 
    "dataProvider": [{ 
 
     "date": "2011-06-01", 
 
     "val": 10 
 
    }, { 
 
     "date": "2011-06-02", 
 
     "val": 11 
 
    }, { 
 
     "date": "2011-06-03", 
 
     "val": 12 
 
    }, { 
 
     "date": "2011-06-04", 
 
     "val": 11 
 
    }, { 
 
     "date": "2011-06-05", 
 
     "val": 10 
 
    }, { 
 
     "date": "2011-06-06", 
 
     "val": 11 
 
    }, { 
 
     "date": "2011-06-07", 
 
     "val": 13 
 
    }, { 
 
     "date": "2011-06-08", 
 
     "val": 14 
 
    }, { 
 
     "date": "2011-06-09", 
 
     "val": 17 
 
    }, { 
 
     "date": "2011-06-10", 
 
     "val": 13 
 
    }], 
 
    "fieldMappings": [{ 
 
     "fromField": "val", 
 
     "toField": "value" 
 
    }], 
 
    "categoryField": "date" 
 
    }], 
 

 
    "panels": [{ 
 

 
    "valueAxes": [{ 
 

 
    }], 
 

 
    "legend": {}, 
 

 
    "stockGraphs": [{ 
 
     "id": "graph1", 
 
     "valueField": "value", 
 
     "type": "line", 
 
     "title": "MyGraph", 
 
     "fillAlphas": 0 
 
    }] 
 
    }], 
 

 
    "panelsSettings": { 
 
    "startDuration": 1 
 
    }, 
 

 
    "categoryAxesSettings": { 
 
    "dashLength": 5 
 
    }, 
 

 
    "valueAxesSettings": { 
 
    "dashLength": 13, 
 
    "guides": [{ 
 
     "value": 10, 
 
     "toValue": 12, 
 
     "lineColor": "#CC0000", 
 
     "lineAlpha": 1, 
 
     "fillAlpha": 0.2, 
 
     "fillColor": "#CC0000", 
 
     "dashLength": 2, 
 
     "inside": true 
 
    }] 
 
    }, 
 

 
    "chartScrollbarSettings": { 
 
    "graph": "graph1", 
 
    "graphType": "line", 
 
    "position": "bottom" 
 
    }, 
 

 
    "chartCursorSettings": { 
 
    "valueBalloonsEnabled": true 
 
    }, 
 

 
    "periodSelector": { 
 
    "periods": [{ 
 
     "period": "DD", 
 
     "count": 1, 
 
     "label": "1 day" 
 
    }, { 
 
     "period": "DD", 
 
     "selected": true, 
 
     "count": 5, 
 
     "label": "5 days" 
 
    }, { 
 
     "period": "MM", 
 
     "count": 1, 
 
     "label": "1 month" 
 
    }, { 
 
     "period": "YYYY", 
 
     "count": 1, 
 
     "label": "1 year" 
 
    }, { 
 
     "period": "YTD", 
 
     "label": "YTD" 
 
    }, { 
 
     "period": "MAX", 
 
     "label": "MAX" 
 
    }] 
 
    } 
 
});
#chartdiv { 
 
    width: 100%; 
 
    height: 500px; 
 
    font-size: 11px; 
 
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="//www.amcharts.com/lib/3/serial.js"></script> 
 
<script src="//www.amcharts.com/lib/3/themes/light.js"></script> 
 
<script src="//www.amcharts.com/lib/3/amstock.js"></script> 
 

 
<div id="chartdiv"></div>

あなたは株価チャートのオブジェクトのプロパティを変更した場合は、再描画するにvalidateNowを呼び出す必要があり、validateNowについてはここで修正valueAxesSettingsオブジェクトです新しい設定でチャートを作成します。 validateDataは、主にdataSets/dataProviderを変更するときに使用されます。