ECharts と PHP インターフェイスを使用して統計グラフを生成する方法

ECharts と PHP インターフェイスを使用して統計グラフを生成する方法

はじめに:
現代の Web アプリケーション開発において、データの視覚化は非常に重要なリンクです。データの視覚的な表示と分析にご協力ください。 ECharts は、強力なオープンソースの JavaScript チャート ライブラリであり、さまざまなチャート タイプと豊富なインタラクティブ機能を提供し、さまざまな統計チャートを簡単に生成できます。この記事では、ECharts と PHP インターフェイスを使用して統計グラフを生成する方法と、具体的なコード例を紹介します。

1. 概要
ECharts は、Baidu によってオープンソース化されたカスタマイズ可能なグラフ ライブラリであり、折れ線グラフ、棒グラフ、円グラフなどのさまざまな種類のグラフをサポートし、豊富なインタラクションとアニメーションを提供します。効果。 PHP は、データを処理し、データベースと対話するために一般的に使用されるサーバー側言語です。 ECharts と PHP を組み合わせることで、データベースからデータを簡単に取得し、それを使用して統計グラフを作成できます。

2. 環境の準備
始める前に、次のソフトウェアとライブラリをインストールして設定する必要があります:

1. PHP 環境: PH​​P スクリプトを使用するには、次のソフトウェアとライブラリをインストールする必要があります。 PHP および Web サーバー (Apache など) を構成します。
2. ECharts ライブラリ: 最新の ECharts ライブラリを ECharts 公式 Web サイトからダウンロードし、HTML ページに導入します。

3. データの取得
統計グラフを作成する前に、まずデータベースからデータを取得する必要があります。以下は、データベースに接続してデータを取得するための簡単な PHP スクリプトです:

// データベースへの接続
$conn = mysqli_connect('localhost', 'username' , 'パスワード', 'データベース');
if (!$conn) {

die('数据库连接失败: ' . mysqli_connect_error());

}

// クエリ データ
$sql = "SELECT * FROM 統計" ;
$result = mysqli_query($conn, $sql);

// 結果の処理
$data = array();
while ($row = mysqli_fetch_assoc($result)) {

$data[] = array(
    'name' => $row['name'],
    'value' => $row['value']
);

}

//データを出力
echo json_encode($data);

//データベース接続を閉じる
mysqli_close($conn);
?>

4. 統計グラフの生成
次に、ECharts と PHP インターフェイスを通じて統計グラフを生成します。以下は、棒グラフを描画するための単純な HTML ページです:

<meta charset="utf-8">
<title>ECharts统计图表</title>
<script src="echarts.min.js"></script>

<div id="chart" style="width: 800px; height: 400px;"></div>
<script>
    // 使用ajax获取数据
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'data.php', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            renderChart(data);
        }
    };
    xhr.send();

    // 渲染图表
    function renderChart(data) {
        var chart = echarts.init(document.getElementById('chart'));

        var option = {
            title: {
                text: '数据统计'
            },
            xAxis: {
                type: 'category',
                data: data.map(function(item) {
                    return item.name;
                })
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                type: 'bar',
                data: data.map(function(item) {
                    return item.value;
                })
            }]
        };

        chart.setOption(option);
    }
</script>

以上がECharts と PHP インターフェイスを使用して統計グラフを生成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。