データ時代の到来により、データの視覚化が多くの企業や開発者の注目を集めています。多くの開発者にとって、データ視覚化の実装は簡単な作業ではありません。ただし、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 コードは次のとおりです:
<title>Highcharts Integration with PHP</title> <script src="highcharts/highcharts.js"></script> <script src="highcharts/modules/exporting.js"></script>
< body>
<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>