IgcDataChart – 積層シリーズにデータラベルを表示する

IgcDataChart では IgcStackedFragmentSeriesComponent の markerTemplate 機能を使用して積層シリーズの各フラグメントにデータの値を表示することができます。

<igc-data-chart> に5つの <igc-stacked-fragment-series> を定義してidを付与します。

<igc-data-chart id="stackedColumnChart" width="800px" height="500px">
  <igc-category-x-axis id="xAxis" name="xAxis" label="Label" gap=".5"></igc-category-x-axis>
  <igc-numeric-y-axis id="yAxis" name="yAxis" minimum-value="0" maximum-value="200"></igc-numeric-y-axis>
  <igc-stacked-column-series name="series1" x-axis-name="xAxis" y-axis-name="yAxis">
	<igc-stacked-fragment-series id="value1Series" name="value1Series" title="Value1" value-member-path="Value1">
	</igc-stacked-fragment-series>
	<igc-stacked-fragment-series id="value2Series" name="value2Series" title="Value2" value-member-path="Value2">
	</igc-stacked-fragment-series>
	<igc-stacked-fragment-series id="value3Series" name="value3Series" title="Value3" value-member-path="Value3">
	</igc-stacked-fragment-series>
	<igc-stacked-fragment-series id="value4Series" name="value4Series" title="Value4" value-member-path="Value4">
	</igc-stacked-fragment-series>
	<igc-stacked-fragment-series id="value5Series" name="value5Series" title="Value5" value-member-path="Value5">
	</igc-stacked-fragment-series>
  </igc-stacked-column-series>
</igc-data-chart>

以下のように getMarker() ファンクションを作成します。

const getMarker = (valueMemberPath: any, yAxis: IgcNumericYAxisComponent) => {
  return {
    measure: function (measureInfo: DataTemplateMeasureInfo) {
      const context = measureInfo.context;
      const height = context.measureText("M").width;
      const width = context.measureText("0.00").width;
      measureInfo.width = width;
      measureInfo.height = height;
    },
    render: function (renderInfo: DataTemplateRenderInfo) {
      let ctx = renderInfo.context;
      let x = renderInfo.xPosition;
      let y = renderInfo.yPosition;

      const dataItem = renderInfo.data.item;
      if (dataItem === null) return;

      const currentValue = dataItem[valueMemberPath];
      const fragmentHeight = yAxis.scaleValue(yAxis.actualMaximumValue - currentValue);
      ctx.fillStyle = "black";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.beginPath();
      ctx.fillText(currentValue, x, y + (fragmentHeight / 2));
    },
    passStarting: (info: DataTemplatePassInfo) => { },
    passCompleted: (info: DataTemplatePassInfo) => { }
  };
}

各 IgcStackedFragmentSeriesComponent に対して markerTemplate プロパティに上記の getMarker() ファンクションを割り当てます。

const yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
const value1Series = document.getElementById('value1Series') as IgcStackedFragmentSeriesComponent;
value1Series.markerTemplate = getMarker("Value1", yAxis);
const value2Series = document.getElementById('value2Series') as IgcStackedFragmentSeriesComponent;
value2Series.markerTemplate = getMarker("Value2", yAxis);
const value3Series = document.getElementById('value3Series') as IgcStackedFragmentSeriesComponent;
value3Series.markerTemplate = getMarker("Value3", yAxis);
const value4Series = document.getElementById('value4Series') as IgcStackedFragmentSeriesComponent;
value4Series.markerTemplate = getMarker("Value4", yAxis);
const value5Series = document.getElementById('value5Series') as IgcStackedFragmentSeriesComponent;
value5Series.markerTemplate = getMarker("Value5", yAxis);