echartsでデータベースのデータを動的に読み込む方法は何ですか？

2年 ago
芽依, 雨夜
2 minutes

echartsにデータベースのデータを動的にロードするためには、PHPやPythonなどのサーバーサイトスクリプト言語を使用してデータベースに接続し、データをechartsにダイナミックにロードする必要があります。

以下は、PHPとMySQLデータベースを使用してechartsにデータを動的に読み込むサンプルコードです。

  1. 最初に、echartsのライブラリファイルとDOMコンテナをあなたのHTMLファイルにインポートしてください。
<!DOCTYPE html>
<html>
<head>
  <title>动态加载数据到ECharts</title>
  <script src="https://cdn.staticfile.org/echarts/4.9.0/echarts.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>
</body>
</html>
  1. PHPファイル（たとえばdata.php）を作成し、データベースに接続してデータを取得します。
<?php
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "database_name";

$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
  die("连接失败: " . $conn->connect_error);
}

// 查询数据
$sql = "SELECT * FROM table_name";
$result = $conn->query($sql);

// 将数据转换为JSON格式
$data = array();
if ($result->num_rows > 0) {
  while($row = $result->fetch_assoc()) {
    $data[] = $row;
  }
}

// 关闭连接
$conn->close();

// 将JSON数据返回给前端
header('Content-Type: application/json');
echo json_encode($data);
?>
  1. 「echartsを使用してデータをロードするために、あなたのHTMLファイルにJavaScriptスクリプトを追加してください。」
<!DOCTYPE html>
<html>
<head>
  <title>动态加载数据到ECharts</title>
  <script src="https://cdn.staticfile.org/echarts/4.9.0/echarts.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>

  <script>
    // 使用ajax请求数据
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        renderChart(data);
      }
    };
    xhr.open('GET', 'data.php', true);
    xhr.send();

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

      var option = {
        xAxis: {
          type: 'category',
          data: data.map(function(item) {
            return item.xAxis;
          })
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: data.map(function(item) {
            return item.yAxis;
          }),
          type: 'line'
        }]
      };

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

上記の例では、PHPとMySQLを使用してデータベースに接続し、クエリを実行し、クエリ結果をJSON形式でフロントエンドに返します。その後、フロントエンドはJavaScriptを使用してajaxリクエストを行い、echartsでグラフを描画します。コード内のデータベース接続情報とクエリ文をご自身の状況に合わせて変更する必要があります。

bannerAds