水平折れ線グラフを使用してハイチャートにデータを表示する方法

Highcharts は、データを表示するための複数のグラフ タイプをサポートする非常に人気のある JavaScript グラフ ライブラリです。その中でも、水平折れ線グラフは、データ内の特定の値の水平位置を表示するために使用される一般的なグラフの種類です。

この記事では、ハイチャートで水平折れ線グラフを使用してデータを表示する方法を紹介し、具体的なコード例を示します。手順は次のとおりです。

ステップ 1: データの準備

まず、次のようなデータを準備する必要があります。

var data = [{
    name: 'Apple',
    value: 85
}, {
    name: 'Orange',
    value: 65
}, {
    name: 'Banana',
    value: 45
}, {
    name: 'Grape',
    value: 30
}, {
    name: 'Lemon',
    value: 15
}];

上記のデータでは、名前を付けます。は水平線の名前を表し、value は水平線の値を表します。ここでは5種類の横線を使用していますが、必要に応じて増減できます。

ステップ 2: コンテナを作成する

Highcharts チャートを配置するための HTML コンテナを作成します。例:

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

ステップ 3: Highcharts ライブラリを導入する

Highcharts ライブラリを HTML ページに導入します。例:

<script src="https://cdn.jsdelivr.net/npm/highcharts@9.1.1/highcharts.js"></script>

ステップ 4: ハイチャート構成を作成する

タイトル、データ、X 軸、Y 軸などを含むハイチャート構成を JavaScript ファイルに作成します。水平折れ線グラフ。水平折れ線グラフの種類は xrange です。具体的な構成コードは次のとおりです。

Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Horizontal Line Chart'
    },
    xAxis: {
        categories: ['Value'],
    },
    yAxis: {
        title: {
            text: ''
        },
        reversed: true,
        maxPadding: 0.1,
        min: 0,
        max: 100,
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Value',
        data: data,
        borderRadius: 5,
        borderColor: '#cccccc',
        borderWidth: 1,
        pointWidth: 20
    }]
});

上記の構成では、チャート タイプは xrange であり、これは水平折れ線チャートを生成することを意味します。 title はグラフのタイトルを表し、xAxis は x 軸を表します。水平折れ線グラフには x 軸が 1 つしかないため、カテゴリに「値」項目は 1 つだけあります。 yAxis は y 軸を表し、reversed は最高値が上になるように y 軸を反転することを表します。maxPadding は y 軸の上下に残されたスペースの割合を表し、min と max は最小値と最大値を表します。 y 軸の。 legend は凡例を表しますが、ここでは不要なため、false に設定されます。 series はデータ系列を表します。name はデータ系列の名前、data はデータ、borderRadius は境界フィレットの半径を表し、borderColor は境界の色を表し、borderWidth は境界の幅を表し、pointWidth は水平線の幅を表します。

ステップ 5: チャートを表示する

最後に、HTML ページで Highcharts 構成を呼び出し、コンテナーにチャートを表示します。

Highcharts.chart('container', options);

完全なコードは次のとおりです:

    
    <script src="https://cdn.jsdelivr.net/npm/highcharts@9.1.1/highcharts.js"></script>


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

    <script>
        var data = [{
            name: 'Apple',
            value: 85
        }, {
            name: 'Orange',
            value: 65
        }, {
            name: 'Banana',
            value: 45
        }, {
            name: 'Grape',
            value: 30
        }, {
            name: 'Lemon',
            value: 15
        }];

        var options = {
            chart: {
                type: 'xrange'
            },
            title: {
                text: 'Horizontal Line Chart'
            },
            xAxis: {
                categories: ['Value']
            },
            yAxis: {
                title: {
                    text: ''
                },
                reversed: true,
                maxPadding: 0.1,
                min: 0,
                max: 100
            },
            legend: {
                enabled: false
            },
            series: [{
                name: 'Value',
                data: data,
                borderRadius: 5,
                borderColor: '#cccccc',
                borderWidth: 1,
                pointWidth: 20
            }]
        };

        Highcharts.chart('container', options);
    </script>

上記は、ハイチャートで水平折れ線グラフを使用してデータを表示する手順のすべてです。お役に立てれば幸いです。

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