Highcharts を使用してドーナツ チャートを作成する方法

Highcharts を使用してドーナツ チャートを作成する方法には、特定のコード サンプルが必要です

1. はじめに
Highcharts は、ドーナツ チャートを作成するために使用できる人気のある JavaScript チャート ライブラリです。さまざまなタイプのインタラクティブなチャートと視覚化。そのうちの 1 つはドーナツ グラフで、データの割合を表示する効果的な方法です。この記事では、Highcharts ライブラリを使用してドーナツ チャートを作成する方法を紹介し、具体的なコード例を添付します。

2. ドーナツ チャートの基本構造
ドーナツ チャートはリングと一連のセクターで構成されます。各セクターはデータ項目を表します。セクターのサイズと角度は、データのサイズ。ドーナツ チャートの中心は通常、全体的なデータやその他の関連情報を表示するために使用されます。

3. 準備作業
Highcharts を使用してドーナツ チャートの作成を開始する前に、まず Highcharts ライブラリを導入する必要があります。ヘッダーに次のコードを追加できます。

<script src="https://code.highcharts.com/highcharts.js"></script>

4. 基本的なドーナツ チャートを作成する
まず、基本的なドーナツ チャートを作成するには、次の最も基本的な構成項目が必要です。

// 创建chart对象
var chart = Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: '环形图示例'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            },
            showInLegend: true
        }
    },
    series: [{
        name: '占比',
        colorByPoint: true,
        data: [{
            name: '数据一',
            y: 30
        }, {
            name: '数据二',
            y: 20
        }, {
            name: '数据三',
            y: 50
        }]
    }]
});

In 上記のコードでは、基本的な Highcharts チャート オブジェクトを作成し、チャート タイプを円グラフである「pie」として指定しました。次に、「シリーズ」構成項目で表示するデータ項目を設定します。各データ項目には名前と対応する値があります。 「plotOptions」構成項目の「pie」は、データラベルの表示形式や凡例に表示するかどうかなど、円グラフのいくつかの表示オプションを設定します。最後に、「container」という ID を持つ要素を HTML ページに追加します。Highcharts はこの要素にグラフをレンダリングします。

上記のコードを実行すると、ページ上に 3 つのセクターを含む円グラフが表示されます。各セクターはデータ項目の割合を表します。

5. ドーナツ チャートのさらなるカスタマイズ
上記のコードは、単なる基本的なドーナツ チャートの例です。Highcharts には、ドーナツ チャートをさらにカスタマイズして美しくするための他の多くの構成オプションも用意されています。以下は、一般的な構成オプションの一部です。

1. 色とスタイル
   各データ項目の色は、「シリーズ」構成項目で指定できます。定義済みのカラー名を使用することも、16 進数のカラー コードを使用することもできます。さらに、円グラフの内側と外側の半径を設定したり、ドーナツ グラフのスタイルを変更したりすることもできます。
2. 凡例とデータ ラベル
   「plotOptions」構成項目の「円」には、位置、スタイル、書式設定など、凡例とデータ ラベルを設定するための多くのオプションが用意されています。必要に応じてこれらのオプションを調整できます。
3. アニメーション効果
   Highcharts には豊富なアニメーション効果オプションが用意されており、「plotOptions」構成項目の「アニメーション」を通じてカスタマイズできます。
4. インタラクティブな動作
   「plotOptions」構成項目で「allowPointSelect」および「cursor」オプションを設定すると、円グラフのクリック インタラクション効果を実現できます。

これらは一般的な構成オプションのほんの一部です。Highcharts には他にも多くの機能とカスタマイズ オプションがあり、特定のニーズに基づいてさらに検討できます。

6. 概要
この記事では、Highcharts ライブラリを使用してドーナツ チャートを作成する方法を紹介し、具体的なコード例を示します。 Highcharts の関連 API を学習してマスターすることで、さまざまな種類のチャートや視覚化を簡単に作成できます。この記事がお役に立てば幸いです。Highcharts でドーナツ チャートの作成が成功することを祈っています。

以上がHighcharts を使用してドーナツ チャートを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。