[]
        
(Showing Draft Content)

チャート:レンダリングサイクル

FlexChartはデータ駆動型です。チャートが連結されているデータ、またはいずれかのプロパティが変更されると、チャートは、次のステップから成るレンダリングサイクルを開始します。

  1. データの取得

    チャートにはデータソース全体を表すitemsSourceプロパティがあります。これは、各系列独自のローカルのitemsSourceプロパティを使用してオーバーライドできます。同様に、チャートには、系列ごとにチャート化する値を決定するbindingXプロパティとbindingプロパティがあります。

    通常、itemsSourceプロパティとbindingXプロパティはチャートオブジェクトで設定し、bindingプロパティは各系列で設定します。

  2. データのスケーリング

    チャートの軸のminプロパティとmaxプロパティを設定すると、チャートの範囲を設定できます。これらのプロパティはデフォルトではnullに設定されており、この場合、チャートは自動的にスケーリングを行います。デフォルトでは、各系列はチャートのメイン軸セット(axisXおよびaxisY)を使用しますが、追加の軸を作成して1つ以上の系列に割り当てることもできます。

  3. renderingイベントの発生

    この時点で、チャートはまだ空です。イベントハンドラは、renderingイベントのengineパラメータを使用して、チャートデータの背景にレンダリングされるカスタム要素を追加できます。これを使用して、アラームゾーンなどの背景要素を追加できます。

  4. 各系列のレンダリング

    このステップで、チャートは、各系列を表す1つ以上のSVG要素を作成します。最も単純で効率的なチャートタイプは「折れ線」と「スプライン」ですが、これらは通常1つのSVG要素で表されます。他のチャートタイプでは、棒やシンボルをレンダリングするために複数の要素が必要です。チャートは、itemFormatterプロパティで指定されたコールバックを呼び出して、各系列内の特定のポイントをカスタマイズできるようにします。軸にもitemFormatterプロパティがあり、これを使用して軸ラベルをカスタマイズできます。

  5. 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');
}