echartsはJSONデータをどのように読み込むのかを教えてください。

2年 ago
優斗, 朝陽
1 minute

JSONデータを読み込むには、まずJSONデータをJavaScriptに読み込む必要があります。そして、EChartsが提供するメソッドを使用して、データをチャートにバインドします。

JSONデータを読み取り、それをEChartsにバインドする方法を示す簡単な例です。

  1. HTMLファイルを作成し、EChartsライブラリとグラフを表示するDOM要素を組み込んでください。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts JSON数据读取示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script src="data.js"></script>
    <script src="script.js"></script>
</body>
</html>
  1. データ.js
var jsonData = [
    {name: '北京', value: 100},
    {name: '上海', value: 200},
    {name: '广州', value: 150},
    // ... 其他数据
];
  1. スクリプト.js
// 获取DOM元素
var chartDom = document.getElementById('chart');

// 初始化图表
var myChart = echarts.init(chartDom);

// 图表配置
var option = {
    // 图表类型
    type: 'bar',
    // 数据
    data: jsonData,
    // 其他配置项...
};

// 将配置项设置给图表
myChart.setOption(option);

HTMLファイルを実行すると、JSONデータから生成されたグラフが表示されるはずです。

これは簡単な例です。必要に応じてコードを修正したり拡張したりすることができます。EChartsのさらなる使用方法やAPIについては、EChartsの公式ドキュメントを参照してください。

bannerAds