データポイント

データポイントは、リンクされたデータ範囲内の1つのセルの内容の値を示すグラフ内のデータです。いくつかの特別な意味のあるデータポイントに特別なスタイルを設定して、データの表示をより集中させ、グラフをより直感的かつ効率的にすることができます。

データポイントスタイルをカスタマイズする

SpreadJSには、さまざまなグラフタイプに基づいてグラフの系列データポイントスタイルをカスタマイズするオプションがあります。GC.Spread.Sheets.Charts.IDataPointStyleインターフェイスを使用して、すべてのプロパティを定義できます。

Chart Data Point Customization Pie Example

異なるシリーズのデータポイントのインデックスは0から数えられ、上から下、左から右に配置されます。

さまざまなタイプのグラフで使用できるプロパティを次の表に示します。

チャートの種類	プロパティ
縦棒円 / ドーナツ横棒ツリーマップサンバーストファンネル複合	backColor backColorTransparency border.color border.transparency border.width border.lineType

チャートの種類

プロパティ

縦棒

円 / ドーナツ

横棒

ツリーマップ

サンバースト

ファンネル

複合

backColor

backColorTransparency

border.color

border.transparency

border.width

border.lineType

注意: エリアおよび塗りつぶしレーダーチャートはデータポイントをサポートしていないため、データポイントAPIは機能しません。サンバーストチャートとツリーマップチャートのbackColorプロパティとbackColorTransparencyプロパティは、古いデータポイントスタイルの構造でも設定できます。

次のサンプルコードは、円グラフの各データポイントに異なる背景色を適用する方法を示しています。

// ワークブックとワークシートを構成します。
var spread = new GC.Spread.Sheets.Workbook("ss",{ sheetCount: 4 });
var activeSheet = spread.getActiveSheet();

// チャートのデータを設定します。
var pieData = [
    ["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'その他'],
    ["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246]
];
spread.sheets[1].setArray(0, 0, pieData);
var dataRange = new GC.Spread.Sheets.Range(0, 0, 2, 8);
            
// 円チャートを作成します。
var pieChart = spread.sheets[1].charts.add('Pie Chart', GC.Spread.Sheets.Charts.ChartType.pie, 2, 50, 600, 350, "A1:H2");
pieChart.title({
    text: "ブラウザ市場シェア"
});
var pieStyle = pieChart.series().get(0);
            
// データポイントのスタイルをカスタマイズします。
pieStyle.dataPoints = {
    0: {
        backColor: {
            type: GC.Spread.Sheets.Charts.PatternType.wideUpwardDiagonal,
            foregroundColor: "white",
            backgroundColor: "LightBlue",
        },
        backColorTransparency: 0.1,
    },
    1: {
        backColor: "Yellow",
    },
    2: {
        backColor: {
            type: GC.Spread.Sheets.Charts.PatternType.trellis,
            foregroundColor: "white",
            backgroundColor: "Green",
        }
    },
    3: {
        backColor: "Orange",
    },
    4: {
        backColor: "Red",
        backColorTransparency: 0.5,
    },
    5: {
        backColor: {
            type: GC.Spread.Sheets.Charts.PatternType.narrowVertical,
            foregroundColor: "white",
            backgroundColor: "Purple",
        }
    },
};

pieChart.series().set(0, pieStyle);

チャート系列のデータポイントを選択すると、系列全体が選択されます。データポイントを再度選択して、チャート系列のそのデータポイントを具体的にカスタマイズします。

同じチャート内の別の系列のデータポイントを選択すると、系列全体が再選択されます。

Chart Data Point Selection UI Column Example