サンバースト チャートを使用してハイチャートにデータを表示する方法

サンバースト チャートを使用してハイチャートにデータを表示する方法

サンバースト チャートは、階層関係を表示するために使用できる階層構造を持つ視覚的なチャートです。データの割合、関係。 Highcharts では、関連するパラメーターを設定し、適切なデータ形式を使用することでサンバースト チャートを作成できます。この記事では、Highcharts ライブラリを使用してサンバースト チャートを作成する方法を紹介し、参考用のサンプル コードをいくつか提供します。

1. データ形式

Highcharts では、サンバースト チャートのデータ形式は階層構造に基づいたツリー状のデータです。各ノードには次の属性が含まれます。

• name: ノード名
• value: ノードのサイズを決定するために使用されるノードの値 (数値または文字列にすることができます) )
• children: 現在のノードの子ノードを表す子ノードの配列

以下は簡単なデータ例です:

{
    name: "总部",
    value: 1000,
    children: [
        {
            name: "部门A",
            value: 500,
            children: [
                {
                    name: "小组A1",
                    value: 200
                },
                {
                    name: "小组A2",
                    value: 300
                }
            ]
        },
        {
            name: "部门B",
            value: 500,
            children: [
                {
                    name: "小组B1",
                    value: 200
                },
                {
                    name: "小组B2",
                    value: 300
                }
            ]
        }
    ]
}

2 コード例

以下は、基本的なサンバースト チャートのコード例です。

Highcharts.chart('container', {
    chart: {
        type: 'sunburst'
    },
    title: {
        text: '旭日图示例'
    },
    series: [{
        data: [
            {
                name: "总部",
                value: 1000,
                color: '#FAD107',
                children: [
                    {
                        name: "部门A",
                        value: 500,
                        color: '#34C1FE',
                        children: [
                            {
                                name: "小组A1",
                                value: 200,
                                color: '#FF0084'
                            },
                            {
                                name: "小组A2",
                                value: 300,
                                color: '#FF47A3'
                            }
                        ]
                    },
                    {
                        name: "部门B",
                        value: 500,
                        color: '#68C600',
                        children: [
                            {
                                name: "小组B1",
                                value: 200,
                                color: '#FF8000'
                            },
                            {
                                name: "小组B2",
                                value: 300,
                                color: '#FFA935'
                            }
                        ]
                    }
                ]
            }
        ]
    }]
});

上記のコードでは、chart オブジェクトを使用して、チャート タイプをサンバースト チャートに設定します。 series の data 属性は、サンバースト チャートのデータを保存するために使用される配列です。各ノードは、name、value、および color 属性を使用して定義されます。 children 属性を設定すると、階層関係をネストできます。

3. チャートのプロパティとスタイルの調整

Highcharts は、サンバースト チャートのスタイルと動作を調整するための豊富なプロパティとメソッドを提供します。以下に、いくつかの共通プロパティを示します。

• chart.polar: 極座標チャートかどうかを指定するために使用されるブール値。デフォルトは false です。
• chart.startAngle: サンバースト チャートの開始角度を指定するために使用される数値。デフォルトは 0 です。
• series.dataLabels.format: データ ラベルの表示形式を指定するために使用される文字列。 {point.node.name} などのプレースホルダーをサポートします。
はノード名を表します。
• series.levels
: さまざまなレベルでスタイルを定義するために使用されます。レベルごとに色や拡大範囲などを設定できます。

属性とスタイルの調整の詳細については、Highcharts の公式ドキュメントを参照してください。

4. 概要

この記事では、サンバースト チャートを使用してデータをハイチャートに表示する方法を紹介し、コード例を示します。サンバースト チャートは、階層関係や比例関係を表示するのに適した視覚的なチャートであり、データ分析やプレゼンテーションに使用できます。適切なデータ形式を設定し、関連するプロパティを調整することで、さまざまなニーズを満たすさまざまなスタイルのサンバースト チャートを作成できます。この記事がハイチャートを使用してサンバースト チャートを作成する際に役立つことを願っています。 ###

以上がサンバースト チャートを使用してハイチャートにデータを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。