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

組み合わせチャートを使用してハイチャートにデータを表示する方法

WBOY

リリース： 2023-12-18 14:39:57

オリジナル

593 人が閲覧しました

組み合わせチャートを使用してハイチャートにデータを表示する方法

組み合わせグラフを使用してハイチャートにデータを表示する方法には、特定のコード例が必要です

あらゆる分野でのデータ視覚化の人気に伴い、より多くの人がデータ視覚化を使用し始めています。 Highcharts は、データを表示するための強力な JavaScript グラフ作成ライブラリです。実際のアプリケーションでは、複数の指標の変化傾向を表示する必要がある場合が多く、そのためには複合チャート機能を使用する必要があります。

Highcharts は、複数の異なるタイプのグラフを組み合わせてデータの意味をよりよく伝えることができる強力な組み合わせグラフ関数を提供します。この記事では、組み合わせチャートを使用してハイチャートにデータを表示する方法と、具体的なコード例を紹介します。

まず、複数の異なる系列を含むグラフを作成する必要があります。たとえば、一定期間にわたる売上と利益の傾向を示したいとします。まず、売上の変化を示す基本的な折れ線グラフを作成できます:

Highcharts.chart('container', {
    title: {
        text: '销售额和利润变化趋势'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
    },
    yAxis: {
        title: {
            text: '金额'
        }
    },
    series: [{
        name: '销售额',
        data: [100, 200, 300, 400, 500, 600, 700]
    }]
});

ログイン後にコピー

次に、利益の変化を示す棒グラフを作成できます:

Highcharts.chart('container', {
    title: {
        text: '销售额和利润变化趋势'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
    },
    yAxis: [{
        title: {
            text: '金额'
        }
    }, {
        title: {
            text: '利润'
        },
        opposite: true
    }],
    series: [{
        name: '销售额',
        type: 'line',
        data: [100, 200, 300, 400, 500, 600, 700]
    }, {
        name: '利润',
        type: 'column',
        data: [50, 100, 150, 200, 250, 300, 350],
        yAxis: 1
    }]
});

ログイン後にコピー

上記のコードでは、次のコードを使用しました。 yAxis では、それぞれ売上と利益に対応する 2 つの y 軸を定義します。利益データは列タイプの系列を使用して表示され、yAxis パラメーターは 1 に指定されます。これは、2 番目の y 軸が使用されることを意味します。

Highcharts は、折れ線グラフや棒グラフに加えて、面グラフ、円グラフなどの他のタイプのグラフもサポートしています。ニーズに応じてさまざまなチャートの種類を選択し、それらを一緒に表示できます。

Highcharts.chart('container', {
    title: {
        text: '销售额和利润变化趋势'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
    },
    yAxis: [{
        title: {
            text: '金额'
        }
    }, {
        title: {
            text: '利润'
        },
        opposite: true
    }],
    series: [{
        name: '销售额',
        type: 'line',
        data: [100, 200, 300, 400, 500, 600, 700]
    }, {
        name: '利润',
        type: 'column',
        data: [50, 100, 150, 200, 250, 300, 350],
        yAxis: 1
    }, {
        name: '利润率',
        type: 'area',
        data: [0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35],
        yAxis: 1
    }, {
        name: '产品销量',
        type: 'pie',
        data: [{
            name: '产品A',
            y: 10
        }, {
            name: '产品B',
            y: 30
        }, {
            name: '产品C',
            y: 50
        }]
    }]
});

ログイン後にコピー

上記のコードでは、面グラフ (series.type は area) と円グラフ (series.type は pie) を追加しました。さまざまなシリーズのさまざまなタイプのグラフを組み合わせると、データをより包括的に表示できます。

要約すると、Highcharts ライブラリの複合グラフ機能を使用すると、複数の異なるタイプのグラフを混合して表示し、データの意味をよりよく伝えることができます。必要なのは、ニーズに応じてさまざまなチャートタイプを選択し、その構成情報をシリーズに追加することだけです。この記事が、複合チャートを使用してハイチャートにデータを表示する方法を理解するのに役立つことを願っています。

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