首页 > 解决方案 > 无法使用 CSV 数据绘制 Highchart 饼图

问题描述

我想用 CSV 文件数据绘制一个饼图,但什么也没得到。
我曾经Highcharts.ajax从本地文件中读取数据,并将push结果放入options.series. 这是我的测试 CSV 数据:

BRCA,60 
LUAD,30
LIHC,10

和JS代码:

<div id="container2" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
var options = {
      chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          defaultSeriesType: 'pie'
      },
      title: {
          text: 'Browser market shares in January, 2018'
      },
      tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
          pie: {
              allowPointSelect: true,
              cursor: 'pointer',
              dataLabels: {
                  enabled: true,
                  format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                  style: {
                      color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                  }
              }
          }
      },
    series: []
};
Highcharts.ajax({
    url: 'CSV_file_path',
    dataType: 'text',
    success: function(data) {
        // Split the lines
        var lines = data.split('\n');
        var items = "";
        var hash = {};
        var series = [{
          name: 'aaa',
          colorByPoint: true,
          data: []
        }]
        lines.forEach(function(line, lineNo) {
            items = line.split(',');
            if (lineNo < (lines.length - 1)) {
                hash['name'] = items[0];
                hash['y'] = items[1];
                series[0].data.push(hash);
                hash = {};

            }
        });
        options.series = series;
        alert(options.series[0].data[0].name)
        Highcharts.chart('container2', options);
    },

    error: function (e, t) {
        console.error(e, t);
    }
});

</script>

标签: javascripthighcharts

解决方案


推荐阅读