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

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

PHPz

リリース： 2023-05-11 11:42:01

オリジナル

832 人が閲覧しました

現代のビジネスのデジタル化が進むにつれ、データ処理と視覚化の重要性が増しています。多くの企業は、ビジネスを理解し、戦略的な意思決定を行うためにデータの視覚化に依存しています。この記事では、PHP と FusionCharts を使用してデータ視覚化チャートを作成する方法について説明します。

FusionCharts は、美しく動的でインタラクティブなグラフを作成するための JavaScript ライブラリのセットです。線形グラフ、円グラフ、棒グラフ、散布図など、さまざまな種類のグラフがサポートされています。 FusionCharts は、ユーザーがデータをよりよく理解できるように、動的な更新やリアルタイムの反応などの多くの機能を提供します。

この記事の例では、A、B、C、D 社の売上データを表示する単純な棒グラフを作成します。 PHP を使用してチャートデータを生成し、FusionCharts を使用してそれを視覚化します。

始める前に、PHP および FusionCharts ライブラリをインストールし、データを準備する必要があります。 data.php という PHP ファイルを作成してデータを生成できます。このファイルでは、売上データを保存する配列を作成します。

<?php
$sales = array(
    array("name" => "Company A", "sales" => 25000),
    array("name" => "Company B", "sales" => 35000),
    array("name" => "Company C", "sales" => 45000),
    array("name" => "Company D", "sales" => 55000)
);
echo json_encode($sales);
?>

ログイン後にコピー

この例では、$sales という名前の配列を作成します。これには 4 つの配列が含まれており、各配列は会社とその売上を表します。 json_encode() 関数を使用して、JavaScript で使用できるようにデータを JSON 形式に変換します。

次に、グラフを表示するための HTML ページを準備する必要があります。 Index.html というファイルを作成し、その中に FusionCharts ライブラリと JavaScript コードを含めることができます。また、グラフを描画できるように、このページ内に空の div 要素を作成する必要があります。

<!DOCTYPE html>
<html>

<head>
  <title>FusionCharts Example</title>
  <script src="fusioncharts.js"></script>
</head>

<body>
  <div id="chart-container"></div>

  <script>
    FusionCharts.ready(function() {
      var salesChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',
        width: '100%',
        height: '500',
        dataFormat: 'json',
        dataSource: {
          "chart": {
            "caption": "Sales Data",
            "xAxisName": "Company",
            "yAxisName": "Sales",
            "theme": "fusion"
          },
          "data": []
        }
      });

      var dataSource = {
        "chart": {},
        "data": []
      };

      // AJAX request to get the data from data.php
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          dataSource.data = JSON.parse(this.responseText);

          salesChart.setChartData(dataSource);
        }
      };
      xhttp.open("GET", "data.php", true);
      xhttp.send();
    });
  </script>
</body>

</html>

ログイン後にコピー

この例では、salesChart という名前の FusionCharts オブジェクトを作成し、グラフの種類を column2d (縦棒グラフ) に設定します。また、グラフの幅、高さ、X 軸と Y 軸の名前、テーマも設定します。また、data.php から取得した販売データを含む dataSource という JavaScript オブジェクトも作成しました。

JavaScript コードでは、XMLHttpRequest オブジェクトを使用して HTTP GET リクエストを作成し、data.php からデータを取得します。データを取得したら、そのデータを dataSource オブジェクトの data プロパティに設定し、setChartData() メソッドを使用してデータをグラフに適用します。

ここで、ブラウザでindex.htmlファイルを開くと、A社、B社、C社、D社の売上データを示す素敵な棒グラフが表示されます。

要約すると、PHP と FusionCharts ライブラリを使用してデータ視覚化チャートを作成する方法を学習しました。これらのツールを使用して美しいインタラクティブなグラフを作成する方法を理解することで、データをより深く理解し、より適切な意思決定を行うことができます。

以上がPHP と FusionCharts を使用してデータ視覚化チャートを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。