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

<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 サイトの他の関連記事を参照してください。