チャート：データラベル

dataLabelsプロパティを使用すると、チャートの各データポイントの横にラベルを表示することができます。

このプロパティを使用するには、dataLabelsオブジェクトで次のプロパティを設定します。

content：プロパティホルダを持つ文字列テンプレート。ツールチップコンテンツの定義に使用される文字列に似ています。たとえば、'{value:n0}'です。
position：データポイントに対するラベルの配置を決定するLabelPosition値。
connectingLine：ラベルと対応するデータポイントを結ぶ線を描画するかどうか。
border：ラベルの周囲に境界線を描画するかどうか。
offset：データポイントからのオフセット距離（ポイント単位）。通常、このプロパティは接続線に使用されます。

FlexChartの例：

import * as wjChart from '@mescius/wijmo.chart';

var myChart = new wjChart.FlexChart('#myChart');
myChart.dataLabel.content = '{value:n0}';
myChart.dataLabel.position = 'Top'; // Top、Left、Right、Center、Bottom、None
myChart.dataLabel.connectingLine = true;
myChart.dataLabel.border = true;
myChart.dataLabel.offset = 10;

データラベル

データラベルコンテンツ

ラベルコンテンツが文字列の場合は、次のプレースホルダを使用できます。

seriesName：データポイントを含む系列の名前（FlexChartのみ）。
pointIndex：データポイントのインデックス。
value：データポイントの値。
x：データポイントのx値（FlexChartのみ）。
y：データポイントのy値（FlexChartのみ）。
name：データポイントの名前。
propertyName：データオブジェクトのプロパティ。

パラメータは、中かっこで囲む必要があります（'x={x}, y={y}'など）。また、連結フィールドの名前（'{country}'、'{item.otherData}'など）を含めることができます。

例：

// チャートを作成し、データポイントの上に配置されたラベルにyデータを表示します。
var myChart = new wjChart.FlexChart('#myChart');
myChart.initialize({
    itemsSource: data,
    bindingX: 'country',
    series: [
        { name: '売上', binding: 'sales' },
        { name: '費用', binding: 'expenses' },
        { name: 'DL数', binding: 'downloads' }
    ],
});
myChart.dataLabel.position = 'Top';
myChart.dataLabel.content = '{country} {seriesName}:{y}';

書式設定が混在するような、複雑なデータラベルのレイアウトでは、コンテンツの中で追加のtspan要素を使用します。次の例では、一部のテキストに太字を適用し、複数のフィールドをテーブルとして表示しています。

myChart.dataLabel.content =
    '<tspan font-weight="bold">{country}</tspan>' + 
    '<tspan fill="red">:{value:n0}</tspan>';

HitTestInfoオブジェクトをパラメータとして受け取る関数としてコンテンツを指定することもできます。次の例は、関数を使用してデータラベルコンテンツを設定する方法を示します。

// データラベルコンテンツを設定します 
myChart.dataLabel.content = function (ht) {
    return ht.name + ":" + ht.value.toFixed();
}

FlexPieデータラベル

FlexPieのデータラベルは、FlexChartやFlexRadarの場合と同様に動作します。ただし、円チャートは円形なので、配置可能な位置が異なります。

FlexPieデータラベルの位置：

Inside：ラベルを円チャートセグメントの内側に表示します。
Outside：ラベルを円チャートセグメントの外側に表示します。
Center：ラベルを円チャートセグメントの中心に表示します。
Radial：ラベルを円チャートセグメント内でセグメントの角度に応じた方向に表示します。
Circular：ラベルを円チャートセグメント内で円周方向に表示します。
None：データラベルの可視性を切り替えます。

FlexPieデータラベルの例：

var myChart = new wjChart.FlexPie('#myChart');
myChart.dataLabel.content = '{value:n0}';
myChart.dataLabel.position = 'Outside'; 
myChart.dataLabel.connectingLine = true;
myChart.dataLabel.border = true;
myChart.dataLabel.offset = 10;

カスタムデータラベルのレンダリング

レンダリングイベント内でデータラベルコンテンツをカスタマイズすることもできます。データラベルのレンダリングイベント引数のcancelプロパティを使用して、特定のデータポイントのレンダリングをキャンセルできます。また、textプロパティを使用して、データラベルコンテンツを条件付きで設定できます。

例：

// "downloads"系列の場合にのみラベルのレンダリングをカスタマイズします
myChart.dataLabel.rendering = function(s, e) {
    if (downloadsOnly && e.hitTestInfo.series.binding != 'downloads') {
        e.cancel = true; 
    }
    e.text = 'nanana';
};