PHPとHighchartsを統合し、チャートの可視化表示を実現

データ時代の到来により、データの視覚化が多くの企業や開発者の注目を集めています。多くの開発者にとって、データ視覚化の実装は簡単な作業ではありません。ただし、PHP と Highcharts を統合すると、チャートの視覚化が簡単になります。

PHP は、Web 開発の分野で広く使用されている人気のあるプログラミング言語です。 Highcharts は、縦棒グラフ、折れ線グラフ、円グラフなど、さまざまなタイプのグラフを簡単に作成できる JavaScript で書かれたグラフ ライブラリです。

次に、PHPとHighchartsを連携させてチャートの可視化を実現する方法を紹介します。

ステップ 1: Highcharts をダウンロードする

まず、Highcharts ライブラリをダウンロードする必要があります。公式ウェブサイトでは、オープンソース版と商用認定版の 2 つのバージョンが提供されています。商用ライセンス版が必要な場合は、対応するライセンスを購入してください。

ダウンロードが完了したら、Highcharts を Web サーバー上のフォルダーに解凍し、フォルダーに適切な権限があることを確認します。

ステップ 2: データを準備する

グラフの作成を開始する前に、データを準備する必要があります。データは、データベース、CSV ファイルなどの任意のデータ ソースから取得できます。

この記事の例では、PHP 配列をデータ ソースとして使用します。使用する配列は次のとおりです:

$data = array(

array('name' => 'Firefox', 'y' => 45.0),
array('name' => 'IE', 'y' => 26.8),
array('name' => 'Chrome', 'y' => 12.8),
array('name' => 'Safari', 'y' => 8.5),
array('name' => 'Opera', 'y' => 6.2),
array('name' => 'Others', 'y' => 0.7)

);

ステップ 3: HTML ページを作成します

次に、 HTML ページを作成し、Highcharts ライブラリ ファイルとチャートの作成に必要な JavaScript コードを統合します。この例の HTML コードは次のとおりです:

aba7b36f87decd50b18c7e3e3c150106
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>Highcharts Integration with PHP</title>
<script src="highcharts/highcharts.js"></script>
<script src="highcharts/modules/exporting.js"></script>

9c3bca370b5104690d9ef395f2c5f8d1
1d6e7d87652dd104f173dbf7284e2799

<div id="container" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
    var data = <?php echo json_encode($data); ?>;
    Highcharts.chart('container', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Browser market share, January, 2018 to May, 2018'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: data
        }]
    });
</script>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

この例では、データを JavaScript 変数に割り当ててから、Highcharts.chart( ) 関数を使用してグラフを作成します。

上記のコードでは、タイトル、色、マウスオーバー プロンプトなど、いくつかの追加パラメーターも定義しています。

特定のパラメータは、ニーズに応じて変更できます。

ステップ 4: コードを実行する

これで、PHP と Highcharts を統合し、データを表示するグラフを作成する準備が整いました。 HTML コードを .php ファイルとして保存し、そのファイルをサーバーにアップロードします。

これで、ブラウザでファイルを開いて、グラフとして表されたデータを確認できるようになりました。

概要

PHP とハイチャートの統合により、JavaScript 開発に習熟していなくてもデータを簡単に視覚化できます。この統合は簡単に始めることができますが、さまざまな種類のグラフを作成できる柔軟性を備えています。

実際のアプリケーションでは、データをより明確に理解して分析できるように、任意のデータ ソースからデータを取得し、グラフの形式で表示することを選択できます。

以上がPHPとHighchartsを統合し、チャートの可視化表示を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。