PHP を使用してデータ視覚化を実現: Chart.js、Highcharts およびその他のライブラリ

データの視覚化は従来のデータ処理と分析においてますます重要な役割を果たしており、データの表示にビジュアル チャートの使用を選択するデータ サイエンティストやビジネス アナリストが増えています。強力なバックエンド言語である PHP は、優れたスケーラビリティと簡単な構築機能を利用して、データ視覚化コンポーネントを既存のアプリケーションに迅速に統合することもできます。現在、市場には多くの視覚化ライブラリがあり、その中で Chart.js と Highcharts は最も人気のあるライブラリの 1 つです。この記事では、PHP でのデータ視覚化にこれらを使用する方法について説明します。

I. Chart.js

Chart.js は、HTML5 Canvas 要素を使用してインタラクティブで応答性の高いグラフを描画できるようにする使いやすい JavaScript ライブラリです。一般的に使用される 7 種類のグラフ (折れ線グラフ、棒グラフ、円グラフ、ドーナツ グラフ、散布図、レーダー グラフ、および極座標グラフ) をサポートしているため、データを迅速かつ正確に表現できます。 Chart.js は、グラフのコンテンツ、スタイル、対話性を簡単に変更するためのシンプルで実用的な API を提供します。さらに、Chart.js はアニメーション効果もサポートしているため、グラフがより鮮やかで興味深いものになります。

Chart.js が PHP と統合されている場合、PHP コールバック関数で JavaScript スクリプトを生成し、HTML ページに出力する必要があります。 PHP のデータ抽象化レイヤー (PDO、MySQLi など) を介して、データを迅速かつ簡単に取得し、グラフ作成のために Chart.js に渡すことができます。以下は、基本的な Chart.js サンプル コードです。

<?php
// 数据库连接信息，这里以SQLite3为例
$db = new PDO('sqlite:/path/to/database.db');

// 查询数据
$stmt = $db->prepare('SELECT * FROM tablename');
$stmt->execute();
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Chart.js所需的标签和数据
$labels = array();
$values = array();
foreach ($data as $row) {
    $labels[] = $row['label'];
    $values[] = $row['value'];
}

// 构建Chart.js的数据源
$chart_data = array(
    'labels' => $labels,
    'datasets' => array(
        array(
            'label' => 'Chart Data',
            'data' => $values,
            'backgroundColor' => 'rgba(255, 99, 132, 0.5)',
            'borderColor' => 'rgba(255, 99, 132, 1)',
            'borderWidth' => 1,
        ),
    ),
);

// 输出JavaScript代码
echo '<canvas id="myChart"></canvas>';
echo '<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>';
echo '<script>';
echo 'var ctx = document.getElementById("myChart").getContext("2d");';
echo 'var myChart = new Chart(ctx, {';
echo '    type: "bar",';
echo '    data: ' . json_encode($chart_data) . ',';
echo '    options: {}';
echo '});';
echo '</script>';
?>

上の例では、まずデータベースからデータをクエリし、それを Chart.js に必要なラベルとデータに変換します。次に、Chart.js のデータ ソースを構築し、echo コマンドを使用して JavaScript コードを HTML ページに出力します。最後に、Chart.js API を使用して基本的な棒グラフの例を作成します。

II. Highcharts

Highcharts は、複数の種類のグラフ (折れ線グラフ、棒グラフ、円グラフ、散布図、高度なヒート マップなど) をサポートし、対話型の優れた JavaScript グラフ ライブラリです。シナリオ (スケーリング、マスキング、エクスポートなど)。 Chart.js とは異なり、Highcharts では承認された商用バージョンまたは非営利目的のオープンソース バージョンを使用する必要があります。

Highcharts を PHP アプリケーションに統合する場合は、Chart.js と同様に JavaScript コードを HTML ページに埋め込む必要があります。ここでも、PHP からデータを取得し、それを Highcharts に渡してデータをプロットする必要があります。以下は簡単な Highcharts の例です:

<?php
// 数据库连接信息，这里以MySQL为例
$mysqli = new mysqli('localhost', 'user', 'password', 'database');

// 查询数据
$query = "SELECT * FROM tablename";
$result = $mysqli->query($query);

// Highcharts需要的标签和数据
$categories = array();
$values = array();
while ($row = $result->fetch_assoc()) {
    $categories[] = $row['label'];
    $values[] = $row['value'];
}

// 输出JavaScript代码
echo '<div id="myChart"></div>';
echo '<script src="https://code.highcharts.com/highcharts.js"></script>';
echo '<script>';
echo 'Highcharts.chart("myChart", {';
echo '    chart: {';
echo '        type: "line"';
echo '    },';
echo '    title: {';
echo '        text: "Chart Data"';
echo '    },';
echo '    xAxis: {';
echo '        categories: ' . json_encode($categories) . '';
echo '    },';
echo '    series: [{';
echo '        name: "Data",';
echo '        data: ' . json_encode($values) . '';
echo '    }]';
echo '});';
echo '</script>';
?>

上記の例では、mysqli ライブラリを使用して MySQL データベースからデータを取得し、それを Highcharts に必要なラベルとデータに変換します。次に、echo コマンドを使用して JavaScript コードを HTML ページに出力します。最後に、Highcharts の API を使用して基本的な折れ線グラフの例を作成します。

概要

データ視覚化は、データ分析とビジネス洞察のための重要なツールの 1 つであり、Chart.js と Highcharts は、データ視覚化を簡単に実装できる 2 つの一般的に使用される JavaScript ライブラリです。 PHP は強力なバックエンド言語として、データ抽象化レイヤーとテンプレート レンダリング機能を使用して、これらの JavaScript ライブラリを既存のアプリケーションに簡単に統合できます。実際のアプリケーションでは、独自のビジネス ロジックをこれらのライブラリに組み合わせて、より効率的かつ正確なデータ視覚化を実現できます。

以上がPHP を使用してデータ視覚化を実現: Chart.js、Highcharts およびその他のライブラリの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。