Question

我尝试在HIGHCHARTS中使用外部csv绘制饼图，但它没有正确显示，而不是标签名称只有切片即将出现。

我为这个pie fiddle创建了一个小提琴，其他图表选项如“bar”，“line”等小提琴，但是'pie'选项失败。

下面的

是在小提琴中设置的图形选项：

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

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

请让我知道这背后的原因以及csv文件的正确处理方法。

由于

Answer 1

您当前的代码将每年作为一个系列，每个vechile类型作为xaxis类别。这对于饼图来说是不合适的，因为它需要是一系列数据点。因此，我们需要切换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。

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

1 个答案: