リンクされたセルの書式設定の追加

チャートは、リンクされたデータソースのセルを使用して値の書式設定を適用し、データラベル、軸、ツールチップなどのチャート要素の書式設定を動的に更新します。SpreadJS のチャートは、機能を実装するために IDataLabels インターフェイスと IAxes インターフェイスの numberFormatLinked プロパティを提供します。

リンクされたデータソースの書式をデータラベルに設定する

numberFormatLinked プロパティが true に設定されている場合、データラベルは、データラベルに対してコードで設定された書式設定に関係なく、データソースのセルの書式を使用します。また、numberFormatLinked プロパティが false に設定されている場合は、データラベルはコードで指定された書式を使用します。

使用例： 例えば、ブラウザ別の月間アクセス数を追跡するダッシュボードを作成するとします。ダッシュボードには、各ブラウザの平均アクセス数を表示する集合縦棒チャートが含まれており、ユーザーが選択した平均アクセス数の設​​定に基づいて、チャートのデータラベルの書式が動的に更新されるようにする必要があります。次のチャートは、numberFormatLinked プロパティが true に設定されている場合のアクセス数データを示しています。

次のサンプルコードは、リンクされたセルを使用してセルの書式設定を実装し、チャートのデータラベルを動的に更新する方法を示しています。

// データシリーズを取得し、データラベルを設定します。
for (var i = 0; i < 3; i++) {
    var series = chart.series().get(i);
    series.dataLabels = {
        showValue: true,
        showCategoryName: false,
        showPercentage: false,
        separator: ",",
        position: GC.Spread.Sheets.Charts.DataLabelPosition.Center,
        format: "#,##0",    
        color: "white",
        backColor: "red",
        borderColor: "blue",
        borderWidth: 2
    };

    // データソースの書式設定をデータラベルに使用するように設定します。
    series.dataLabels.numberFormatLinked = true;
    chart.series().set(i, series);

メモ： 散布図は例外で、データ ラベルの「x 値」、「y 値」、および「バブル サイズ」フィールドでは、ユーザー指定の書式設定が使用されます。

リンクされたデータソースの書式を軸に設定する

numberFormatLinkedプロパティがtrueに設定されている場合、チャートの軸は軸に対してコードで設定された書式設定に関係なく、データソースのセルの書式を使用します。

• 軸のデータがテキストの場合、すべての軸ラベルはデータシリーズの各データから設定されます。

• 軸のデータが日付または数値の場合、すべての軸ラベルはデータシリーズの最初のデータポイントの書式設定が適用されます。

numberFormatLinked プロパティが false に設定されている場合、チャートの軸は指定された数値フォーマッタを使用します。ただし、値軸の場合、すべての軸ラベルはデータシリーズの最初のデータポイントの書式設定が使用されます。

使用例： 例えば、ブラウザ別の月間アクセス数を追跡するダッシュボードを作成するとします。ダッシュボードには、各ブラウザの平均アクセス数を表示する集合縦棒チャートが含まれており、ユーザーが選択した平均アクセス数の設​​定に基づいて、チャートの軸ラベルの書式が動的に更新されるようにする必要があります。ユーザーが選択した日付書式設定に基づいて、チャート x軸の書式設定が動的に更新されるようにする必要があります。次のチャートは、numberFormatLinked プロパティが true に設定され、軸の種類が「テキスト」に設定されている場合に、チャートの x軸にアクセス数データの日付が表示されています。

次のサンプルコードは、リンクされたセルを使用してセルの書式設定を実装し、軸を動的に更新する方法を示しています。

// データソースの書式設定を軸ラベルに設定します。
var chart = activeSheet.charts.all()[0];
var axes = chart.axes();
axes.primaryCategory.categoryType = GC.Spread.Sheets.Charts.CategoryType.CategoryScale;
axes.primaryCategory.numberFormatLinked = true;
chart.axes(axes);
var series = chart.series().get(0);
series.dataLabels.numberFormatLinked = true;
chart.series().set(0, series);

制限事項

• データソースで書式設定が変更された場合、チャートではデータを更新するための処理が必要になります。