ホームページ >バックエンド開発 >PHPチュートリアル >PHP と CanvasJS を使用してデータ視覚化チャートを作成する
PHP と CanvasJS を使用してデータ視覚化チャートを作成する
- WBOYオリジナル
- 2023-05-11 17:07:42984ブラウズ
データの増大とインターネットの発展に伴い、データ処理と視覚化はテクノロジー業界の重要な部分になりました。マーケティング、財務、ヘルスケア、その他の分野のいずれにおいても、データの視覚化は不可欠です。
データの視覚化において、チャートは非常に便利なツールです。チャートの役割は、データを視覚的な形式に変換して、データの傾向の理解と分析を容易にすることです。そこでこの記事では、PHPとCanvasJSを使ってデータ視覚化チャートを作成する方法を紹介します。
CanvasJS は、インタラクティブで動的なグラフを作成するための JavaScript ライブラリです。 CanvasJS は数百のグラフ タイプをサポートし、さまざまなデバイスやブラウザで動作します。 PHP と CanvasJS を使用してチャートを作成するには、次の手順に従う必要があります。
ステップ 1: CanvasJS をインストールする
CanvasJS を使用してグラフを作成するには、まず CanvasJS をインストールする必要があります。 CanvasJS のダウンロードとインストールは、ソース コードをローカル コンピューターにダウンロードするのと同じくらい簡単です。 CanvasJS 公式 Web サイトからソースコードをダウンロードできます。ダウンロード後、Web サーバーに解凍するとすぐに使用できます。
ステップ 2: データの作成
グラフを作成する前に、データが必要です。 PHP では、MySQL またはその他のデータベースを使用してデータを保存できます。たとえば、次のコードを使用して MySQL データベースからデータを取得できます。
//连接至数据库
$con = mysqli_connect("host","username","password","database");
//查询数据
$result = mysqli_query($con,"SELECT * FROM 数据表名");
//将数据保存到数组中
$data = array();
while ($row = mysqli_fetch_array($result)) {
$data[] = array("label"=>$row["标签"],"y"=>$row["数值"]);
}
//关闭连接
mysqli_close($con);このコード スニペットは、MySQL データベースからデータを取得し、データ配列にデータを保存します。必要に応じて、クエリのデータ テーブルとフィールドを変更できます。
ステップ 3: グラフを作成する
データを取得したので、次にグラフを作成する必要があります。次のコードを使用してデータを CanvasJS に渡すことで、インタラクティブなグラフを作成できます。
<!DOCTYPE html>
<html>
<head>
<title>使用PHP和CanvasJS创建数据可视化图表</title>
<script src="canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "数据可视化图表"
},
axisY: {
title: "数值"
},
data: [{
type: "column",
dataPoints: <?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>
}]
});
chart.render();
}
</script>
</body>
</html>このコード スニペットでは、Web ページを作成し、そこに CanvasJS ソース コードをインポートします。コードでは、div 要素を作成し、その ID を「chartContainer」に設定します。これはグラフ コンテナです。 JavaScript を使用してチャートを作成し、このコンテナーにレンダリングします。
次に、いくつかのチャート設定を扱う必要があります。ここでは「縦棒」タイプのグラフを使用し、データやその他の詳細を指定します。ここでは、タイトルやデータラベルなどをカスタマイズできます。 CanvasJS は他の多くのチャート タイプをサポートしており、ニーズに合ったものを選択できます。
ここでは、データ配列にデータを追加するだけではありません。 json_encode を使用してデータ配列を JavaScript オブジェクトに変換します。 JSON_NUMERIC_CHECK オプションは、出力数値が文字列として出力されないようにします。特定の内容は、CanvasJS 公式ドキュメントで参照できます。
ステップ 4: ローカルまたはクラウドでテストする
最後のステップは、アプリケーションをテストすることです。ローカル マシン上で PHP Web サーバーを実行できます。 WAMP サーバーを使用している場合は、ローカルホストまたはアドレス 127.0.0.1 でブラウザを開いてアプリケーションをテストできます。 XAMPP サーバーを使用している場合は、ローカルホストまたは 127.0.0.1 アドレスでブラウザを開きます。
Web ホスティング サービスを使用している場合は、アプリケーションをホスティング サーバーにアップロードし、ブラウザを使用してアクセスできます。
概要
PHP と CanvasJS を使用してデータ視覚化チャートを作成するプロセスは非常に簡単です。まずデータを取得し、CanvasJS を使用してビジュアル チャートに変換します。 CanvasJS を使用すると、多くのグラフの種類とカスタマイズ可能なオプションから選択できるため、ニーズに合った対話型のグラフを作成できます。
以上がPHP と CanvasJS を使用してデータ視覚化チャートを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。