[]
FlexChartはデータ駆動型です。チャートが連結されているデータ、またはいずれかのプロパティが変更されると、チャートは、次のステップから成るレンダリングサイクルを開始します。
データの取得:
チャートにはデータソース全体を表すitemsSourceプロパティがあります。これは、各系列独自のローカルのitemsSourceプロパティを使用してオーバーライドできます。同様に、チャートには、系列ごとにチャート化する値を決定するbindingXプロパティとbindingプロパティがあります。
通常、itemsSourceプロパティとbindingXプロパティはチャートオブジェクトで設定し、bindingプロパティは各系列で設定します。
データのスケーリング:
チャートの軸のminプロパティとmaxプロパティを設定すると、チャートの範囲を設定できます。これらのプロパティはデフォルトではnullに設定されており、この場合、チャートは自動的にスケーリングを行います。デフォルトでは、各系列はチャートのメイン軸セット(axisXおよびaxisY)を使用しますが、追加の軸を作成して1つ以上の系列に割り当てることもできます。
renderingイベントの発生:
この時点で、チャートはまだ空です。イベントハンドラは、renderingイベントのengineパラメータを使用して、チャートデータの背景にレンダリングされるカスタム要素を追加できます。これを使用して、アラームゾーンなどの背景要素を追加できます。
各系列のレンダリング:
このステップで、チャートは、各系列を表す1つ以上のSVG要素を作成します。最も単純で効率的なチャートタイプは「折れ線」と「スプライン」ですが、これらは通常1つのSVG要素で表されます。他のチャートタイプでは、棒やシンボルをレンダリングするために複数の要素が必要です。チャートは、itemFormatterプロパティで指定されたコールバックを呼び出して、各系列内の特定のポイントをカスタマイズできるようにします。軸にもitemFormatterプロパティがあり、これを使用して軸ラベルをカスタマイズできます。
renderedイベントの発生:
この時点で、チャートは完全にレンダリングされています。イベントハンドラは、renderedイベントのengineパラメータを使用して、チャートデータの前景にレンダリングされるカスタム要素を追加できます。これを使用して、ポイント注釈などの要素を追加できます。
例:レンダリング前後の時間を出力します。
rendering: function(s, e) {
var pt = myChart.dataToPoint(0, myChart.axisY.actualMax);
e.engine.drawString('rendering ' + Date.now(), pt, 'annotation');
},
rendered: function(s, e) {
var pt = myChart.dataToPoint(0, myChart.axisY.actualMin);
e.engine.drawString('rendered ' + Date.now(), pt, 'annotation');
}