echartsでCSVファイルを読み込んで円グラフを描く方法は？

2年 ago
蓮, 翼
1 minute

EChartsを使用して円グラフを描画する際には、CSVファイルを読み込んでデータを取得することができます。以下は、EChartsとjQueryライブラリを使用してCSVファイルを読み込み、円グラフを描画する方法を示した例です。

最初に、EChartsとjQueryライブラリが読み込まれていることを確認してください。

<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

その後、

要素を作成し、円グラフのコンテナとします。

<div id="pieChart" style="width: 600px; height: 400px;"></div>

次に、JavaScriptでCSVファイルを読み込んでデータを処理します。

$(document).ready(function() {
  $.get('data.csv', function(csvData) {
    // 将 CSV 数据转换为数组
    var lines = csvData.split('\n');
    var data = [];
    for (var i = 0; i < lines.length; i++) {
      var values = lines[i].split(',');
      data.push({
        name: values[0],
        value: values[1]
      });
    }

    // 绘制饼图
    var myChart = echarts.init(document.getElementById('pieChart'));
    var option = {
      series: [{
        type: 'pie',
        radius: '60%',
        data: data
      }]
    };
    myChart.setOption(option);
  });
});

このコードでは、最初にjQueryの$.getメソッドを使用して、data.csvという名前のCSVファイルの内容を読み込みます。次に、CSVデータを配列に変換し、それぞれのデータ項目に名前と値を設定します。最後に、EChartsのsetOptionメソッドを使用して、変換された配列をデータとしてパイチャートを描画します。

実際のCSVファイルのパスにdata.csvの例を置き換えるようにしてください。また、必要に応じて円グラフのスタイルや設定を調整することもできます。

EChartsの使用方法や設定については、公式ドキュメントを参照してください：https://echarts.apache.org/zh/index.html

bannerAds