サンバーストチャートを使用してハイチャートにデータを表示する方法-jsチュートリアル-php.cn

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

王林

リリース： 2023-12-18 08:18:55

オリジナル

1135 人が閲覧しました

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

サンバーストチャートは、階層関係を表示するために使用できる階層構造を持つ視覚的なチャートです。データの割合、関係。 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 サイトの他の関連記事を参照してください。