積み上げチャートを使用してハイチャートにデータを表示する方法-jsチュートリアル-php.cn

積み上げチャートを使用してハイチャートにデータを表示する方法

WBOY

リリース： 2023-12-18 17:56:46

オリジナル

645 人が閲覧しました

積み上げチャートを使用してハイチャートにデータを表示する方法

積み上げグラフを使用してハイチャートにデータを表示する方法

積み上げグラフはデータを視覚化する一般的な方法であり、複数のデータ系列の合計を同時に表示できます。各データ系列の寄与をヒストグラムの形式で表示します。 Highcharts は、さまざまなデータ視覚化のニーズを満たすための豊富な種類のグラフと柔軟な構成オプションを提供する強力な JavaScript ライブラリです。この記事では、Highcharts を使用して積み上げグラフを作成する方法と、対応するコード例を紹介します。

まず、Highcharts ライブラリファイルを導入する必要があります。 HTML ページの

タグに次のコードを追加します:

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

ログイン後にコピー

次に、タグ内にグラフをホストするコンテナを作成します。

要素を使用して、「chart-container」などの一意の ID を指定できます。コードは次のとおりです。

<div id="chart-container"></div>

ログイン後にコピー

次に、JavaScript コードを使用してグラフを構成し、レンダリングします。積み上げグラフを作成するには、Highcharts の Stacking プロパティを使用し、それを「normal」に設定する必要があります。同時に、データ系列の名前、データ、および積み重ね方法も指定する必要があります。コードは次のとおりです。

Highcharts.chart('chart-container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: '堆叠图表示例'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月']
    },
    yAxis: {
        min: 0,
        title: {
            text: '数值'
        }
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: '系列一',
        data: [5, 3, 4, 7, 2]
    }, {
        name: '系列二',
        data: [2, 2, 3, 2, 1]
    }, {
        name: '系列三',
        data: [3, 4, 4, 2, 5]
    }]
});

ログイン後にコピー

上記のコードでは、棒グラフ (タイプ: 'bar') を作成し、タイトルを「積み上げグラフの例」に設定します。 X 軸のカテゴリは月、Y 軸は数値を表します。凡例の reversed 属性は true に設定され、データ系列が積み上げ順に表示されます。これは、データ系列が積み上げ方式で表示されることを意味します。最後に、series 属性を通じて、名前と対応するデータを含む 3 つのデータシリーズを指定します。

最後に、この JavaScript コードをページに配置して、ページの読み込み時に積み上げグラフが表示されるようにするだけです。完了すると、複数のデータ系列の合計と個々の寄与を視覚的に表示する積み上げグラフを含むページが作成されます。

上記は、積み上げチャートを使用してハイチャートにデータを表示する方法に関する具体的な方法とコード例です。シンプルな構成とコーディングで、魅力的でわかりやすい積み上げグラフを簡単に作成して、データの表示と分析を改善し、より多くの情報に基づいた意思決定を行うことができます。

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