javascript - 无法在 HighCharts 中使用外部 csv 文件绘制饼图

Question

我尝试在 HIGHCHARTS 中绘制一个带有外部 csv 的饼图，但它没有正确出现，而不是标签名称，只有切片出现。

我为此 pie fiddle 创建了一个 fiddle , fiddle 适用于其他图表选项，如“bar”、“line”等，但不适用于“pie”选项。

下面是fiddle中设置的图表选项:

var options = {
            chart: {
                renderTo: 'container',
                type: 'pie'
            },
            title: {
                text: 'Vechicle Sales'                 
            },

            xAxis: {
                categories: []
            },
            yAxis: {
                title: {
                    text: 'Sales'
                }
            },
            series: []
        };

请告诉我这背后的原因是什么以及对 csv 文件的正确处理是什么。

谢谢

Answer 1

您当前的代码将每年作为一个系列，将每种车辆类型作为一个 x 轴类别。这不适用于饼图，因为它需要是一系列数据点。因此，我们需要切换 CSV 解析:

var seriesData = []; // this will be an array of point objects
var lines = csvData.split('\n');

$.each(lines, function(lineNo, line) {
  var items = line.split(',');

  if (lineNo === 0) { // first line contains point names
    $.each(items, function(itemNo, item) {
      //skip first item of first line
      if (itemNo > 0) {
        seriesData.push({
          name: item,
          y: 0
        }); // create a data point object
      }
    });
  } else {

    $.each(items, function(itemNo, item) {
      if (itemNo > 0) {
        // find our data point and sum the values
        seriesData[itemNo - 1]['y'] += parseFloat(item);
      }
    });
  }
});

最后将这些数据添加为一个系列:

options.series.push({data: seriesData, name: 'Vehicle'});

工作 example .