IgcDataChart – コールアウトのテキストを変更する

IgcDataChart のコールアウト機能を使用するとデータの値をチャートのデータポイントに表示することができます。

<igc-data-chart id="lineChart" width="800px" height="500px" computed-plot-area-margin-mode="Series">
  <igc-category-x-axis id="xAxis" name="xAxis" label="year" interval="1"></igc-category-x-axis>
  <igc-numeric-y-axis id="yAxis" name="yAxis" minimum-value="0">
  </igc-numeric-y-axis>
  <igc-line-series title="Europe" name="series1" x-axis-name="xAxis" y-axis-name="yAxis" value-member-path="europe">
  </igc-line-series>
  <igc-line-series title="China" name="series2" x-axis-name="xAxis" y-axis-name="yAxis" value-member-path="china">
  </igc-line-series>
  <igc-line-series title="America" name="series2" x-axis-name="xAxis" y-axis-name="yAxis" value-member-path="america">
  </igc-line-series>
  <!-- コールアウトを追加する ここから-->
  <igc-callout-layer name="CalloutLayer1" id="CalloutLayer1" is-auto-callout-behavior-enabled="true"
	callout-leader-brush="orange" callout-outline="orange" callout-background="white"
	callout-text-color="orange" callout-stroke-thickness="1" callout-collision-mode="Greedy">
  </igc-callout-layer>
  <!-- コールアウトを追加する ここまで-->
</igc-data-chart>

IgcCalloutLayerComponent の calloutLabelUpdating イベントを使用し、コールアウトのテキスト内容をカスタマイズすることができます。

例として、先のコールアウトの一番左の項目にシリーズのタイトルを追加し、また、各項目の値の前もしくは後に通貨記号を表示するようにします。

IgcCalloutLayerComponent の calloutLabelUpdating イベントを以下のように実装します。

const calloutLayer = document.getElementById("CalloutLayer1") as IgcCalloutLayerComponent;
calloutLayer.calloutLabelUpdating = (sender: IgcCalloutLayerComponent, args: IgcCalloutLabelUpdatingEventArgs) => {
  const valuePath = (args.series as IgcLineSeriesComponent).valueMemberPath;
  let valueText;
  if (valuePath == "europe") {
    valueText = args.item[valuePath] + "€";
  }
  else if (valuePath == "china") {
    valueText = "¥" + args.item[valuePath];
  }
  else if (valuePath == "america") {
    valueText = "$" + args.item[valuePath];
  }

  if (args.item.year == "2015") {
    args.label = args.series.title + ' - ' + valueText;
  }
  else {
    args.label = valueText;
  }
};