echartsはデータを動的にロードする方法は？

1年 ago
夏樹, 風
1 minute

EChartsはAjaxやWebSocketなどの技術を使用してデータを動的にロードすることができます。以下はよく使われるデータの動的ロード方法です：

  1. HTMLファイルにEChartsのJavaScriptファイルをインポートし、必要なテーマやレンダラーファイルも追加してください。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 动态加载数据示例</title>
    <script src="echarts.min.js"></script>
    <script src="echarts-theme.js"></script>
    <script src="echarts-renderer.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <button onclick="loadData()">加载数据</button>

    <script>
        // 初始化 ECharts 实例
        var chart = echarts.init(document.getElementById('chart'));

        // 定义图表的配置项和数据
        var option = {
            // 图表的配置项
            // ...
        };

        // 加载数据的函数
        function loadData() {
            // 使用 Ajax 请求获取数据
            // 这里假设数据请求的 URL 为 data.json
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'data.json', true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
                    // 更新图表的数据
                    option.series[0].data = data;
                    // 使用刚指定的配置项和数据显示图表
                    chart.setOption(option);
                }
            };
            xhr.send();
        }
    </script>
</body>
</html>
  1. データの.jsonファイル
[10, 20, 30, 40, 50]
  1. データをロードする。
  2. オプションを設定する (opushon o settei suru)

例として示されたコードは、データを動的にロードする簡単な方法を提供するだけであり、実際のアプリケーションでは必要に応じて変更する可能性があります。

bannerAds