Highcharts を使用してダッシュボードグラフを作成する方法-jsチュートリアル-php.cn

Highcharts を使用してダッシュボードグラフを作成する方法

PHPz

リリース： 2023-12-17 16:41:12

オリジナル

554 人が閲覧しました

Highcharts を使用してダッシュボードグラフを作成する方法

Highcharts を使用してダッシュボードチャートを作成する方法。特定のコードサンプルが必要です。

前書き:

ダッシュボードチャートは一般的なデータ視覚化ツールです。データをダッシュボードの形式で表示するため、データがより直感的で理解しやすくなります。 Highcharts は、ダッシュボードグラフを含む複数のグラフタイプをサポートする強力な JavaScript グラフ作成ライブラリです。この記事では、Highcharts を使用してダッシュボードグラフを作成する方法を紹介し、具体的なコード例を示します。

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

まず、Highcharts ライブラリファイルを HTML ページに導入する必要があります。高品質なHighchartsライブラリは、公式Webサイト（https://www.highcharts.com/）からダウンロードするか、CDN（Content Delivery Network）を利用して導入できます。

以下はサンプルコードです:

<!DOCTYPE html>
<html>
<head>
    <title>仪表盘图表示例</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div id="chartContainer" style="width: 400px; height: 300px;"></div>

    <script>
        // 在这里写创建仪表盘图表的代码
    </script>
</body>
</html>

ログイン後にコピー

ステップ 2: ダッシュボードチャートを作成する

次に、JavaScript コードでダッシュボードチャートを作成する必要があります。まず、ページの読み込み時にダッシュボードチャートを表示するコンテナを作成する必要があります。ここでは、div 要素をコンテナとして使用し、それに一意の ID (ここでの ID は「chartContainer」) を与えます。

次に、JavaScript コードで、Highcharts ライブラリの chart 関数を使用してダッシュボードグラフを作成します。

以下はサンプルコードです:

<script>
    $(document).ready(function() {
        // 创建仪表盘图表
        Highcharts.chart('chartContainer', {
            chart: {
                type: 'gauge',
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false
            },
            title: {
                text: '仪表盘示例'
            },
            pane: {
                startAngle: -150,
                endAngle: 150,
                background: [{
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                            [0, '#FFF'],
                            [1, '#333']
                        ]
                    },
                    borderWidth: 0,
                    outerRadius: '109%'
                }, {
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                            [0, '#333'],
                            [1, '#FFF']
                        ]
                    },
                    borderWidth: 1,
                    outerRadius: '107%'
                }, {
                    // default background
                }, {
                    backgroundColor: '#DDD',
                    borderWidth: 0,
                    outerRadius: '105%',
                    innerRadius: '103%'
                }]
            },
            // 在这里配置仪表盘的数据
            series: [{
                data: [80],
                dial: {
                    radius: '100%',
                    baseWidth: 10,
                    baseLength: '80%',
                    rearLength: 0
                },
            }]
        });
    });
</script>

ログイン後にコピー

上記のサンプルコードでは、chart 関数を使用してダッシュボードチャートを作成し、 chart type 属性は「gauge」です。これは、ダッシュボードタイプのグラフを作成することを意味します。

次に、ダッシュボードグラフのタイトル、ダッシュボードの背景、ダッシュボードのデータ、その他の属性を構成できます。上記サンプルコードでは、「ダッシュボード例」というタイトルのダッシュボードを構成していますが、ダッシュボードのスケール範囲は-150～150、背景はグラデーションカラー、データは80です。ニーズに応じて設定できます。

ステップ 3: ページにダッシュボードグラフを表示する

最後に、作成したダッシュボードグラフを HTML ページに表示する必要があります。 HTML ページの div コンテナーで

を使用し、上記のコード例の

。 このように、ページが読み込まれると、作成されたダッシュボードグラフが自動的に表示されます。

概要:

Highcharts を使用してダッシュボードグラフを作成するのは、非常に簡単な作業です。 Highcharts ライブラリを導入し、グラフを表示するコンテナを作成し、JavaScript コードでグラフのプロパティとデータを構成するだけです。この記事で提供されているコード例が、美しく強力なダッシュボードグラフの作成に役立つことを願っています。

以上がHighcharts を使用してダッシュボードグラフを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。