ヘッダ

ヘッダはデータチャートの上部に表示されるテキストフィールドです。ヘッダにはチャートの全体的な情報や識別情報が提供され、ユーザーがチャートのテーマや表示されているデータをすばやく理解するのに役立ちます。

GC.Spread.Sheets.DataCharts名前空間のIHeaderOptionインターフェイスのプロパティ（title、textStyleなど）を使用して、データチャートのヘッダを追加およびカスタマイズできます。

ヘッダのプロパティ

次のリストは、IHeaderOptionインターフェイスの主要なプロパティを示しています。

プロパティ	説明	サンプルプレビュー
title	データチャートのヘッダ領域に表示されるテキスト内容を設定します。
textStyle	ヘッダテキストのスタイルを設定します。例えば、フォントファミリー、フォントサイズ、フォントスタイル、フォントの太さなどです。
padding	ヘッダ領域の余白を設定します。
style	ヘッダ領域のスタイルを設定します。例えば、背景色、枠線のスタイルなどです。

コードの使用

次のサンプルコードは、データチャートのカスタムヘッダを設定する方法を示しています。

このサンプルコードは、データチャートの作成ページで記載されているsalesTableデータを使用しています。したがって、そのページに記載されている主要な手順に従ってデータチャートの設定を完了してください。完了したら、以下のコードを使用してヘッダ要素を設定できます。さらに、特定のニーズに応じてデータソースをカスタマイズする柔軟性があります。

// チャートのヘッダ
const sheet = spread.getSheet(0);
sheet.name("Chart Header");
const dataChart = sheet.dataCharts.add('data-chart-1', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);

dataChart.setChartConfig({
    tableName: 'Sales',
    config: {
        // ヘッダを構成します。
        header: {             // GC.Spread.Sheets.DataCharts.IHeaderOptionインターフェース
            title: "My DataChart",      // 文字列
            textStyle: {          //GC.Spread.Sheets.DataCharts.ITextStyleOptionインターフェース
                alignment: GC.Spread.Sheets.DataCharts.HAlign.center,
                color: "#9f3b47",
                fontFamily: "Century",
                fontSize: 18,
                fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
                fontWeight: "Bold",
                writingMode: GC.Spread.Sheets.DataCharts.Orientation.horizontal,
                textDecoration: { underline: true },
            },
            padding: {       // GC.Spread.Sheets.DataCharts.IPaddingOption
                top: 10,
                bottom: 10
            },
            height: 30,      //数字
            style: {         // GC.Spread.Sheets.DataCharts.IStyleOption
                fill: { type: "CssColor", color: "#dfeeea" },
                fillOpacity: 0.7,
                stroke: { type: "CssColor", color: "#aaaaaa" },
                strokeDasharray: "0.5,0.5",
                strokeOpacity: 0.7,
                strokeWidth: 1
            }
        }
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.column,
            encodings: {
                values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                category: { field: 'Product' },
                color: { field: 'Product' },
            }
        }
    ]
});