PHP と CanvasJS を使用してデータ視覚化チャートを作成する-PHPチュートリアル-php.cn

PHP と CanvasJS を使用してデータ視覚化チャートを作成する

WBOY

リリース： 2023-05-11 18:30:02

オリジナル

960 人が閲覧しました

データの増大とインターネットの発展に伴い、データ処理と視覚化はテクノロジー業界の重要な部分になりました。マーケティング、財務、ヘルスケア、その他の分野のいずれにおいても、データの視覚化は不可欠です。

データの視覚化において、チャートは非常に便利なツールです。チャートの役割は、データを視覚的な形式に変換して、データの傾向の理解と分析を容易にすることです。そこでこの記事では、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 サイトの他の関連記事を参照してください。