echartsでデータベースから動的にデータを取得する方法

2年 ago
海斗, 葵
1 minute

EChartsで動的にデータベースからデータを取得するには、PHPやPythonなどのバックエンド言語を中間層として用いる必要があります。バックエンド言語はデータベースに接続し、フロントエンドのJavaScriptコードにデータを供給します。以下に基本的な手順と例を示します。

バックエンドスクリプトの作成：

馴染みのバックエンド言語（例えばPHP）でスクリプトファイルを記述する。

スクリプト内でデータベースに接続し、クエリ文を実行して必要なデータを抽出します。

結果を JSON 形式に変換し、ブラウザに出力します。

   <?php

// 连接到数据库

$conn = new mysqli(“localhost”, “username”, “password”, “database_name”);

// 查询并获取数据

$result = $conn->query(“SELECT * FROM your_table”);

$data = array();

while ($row = $result->fetch_assoc()) {

$data[] = $row;

}

// 输出数据为JSON格式

header(‘Content-Type: application/json’);

echo json_encode($data);

// 关闭数据库连接

$conn->close();

?>



フロントエンドページでJavaScriptを使ってバックエンドのデータを取得する


HTMLファイルでEChartsライブラリとjQueryあるいはその他のAjaxライブラリをインポートする。


ECharts のグラフを表示するためのコンテナ要素を作成します。


JavaScriptのコードを使ってバックエンドのスクリプトにAjaxリクエストを送り、返ってきたデータを処理する。


データがグラフで表示されるよう、EChartsが提供するAPIを使用する。


   <!DOCTYPE html>


<html>


<head>


<!– 引入ECharts库 –>


<script src=”https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js”></script>


<!– 引入jQuery库 –>


<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>


</head>


<body>


<!– 创建一个用于显示图表的容器 –>


<div id=”chartContainer” style=”width: 600px; height: 400px;”></div>


<script>


// 使用Ajax请求后端数据


$.ajax({


url: “your_backend_script.php”,


type: “GET”,


dataType: “json”,


success: function (data) {


// 处理返回的数据，并在ECharts中展示


var chartContainer = document.getElementById(“chartContainer”);


var myChart = echarts.init(chartContainer);


var option = {


// 根据需求设置ECharts的配置项和数据


series: [{


data: data,


type: ‘bar’


}]


};


myChart.setOption(option);


}


});


</script>


</body>


</html>




上記のサンプルコードでは、バックエンド言語として PHP を使用していますが、必要に応じて他のバックエンド言語を使用できます。さらに、ECharts ライブラリと対応するデータベース ドライバが正しくインストールされていることを確認してください。

        


        
        

			        

    


	



		            	                        

        


    

















  
    bannerAds