使用 .csv 的馅饼甜甜圈答案

【问题标题】：Pie-donut using .csv使用 .csv 的馅饼甜甜圈
【发布时间】：2018-01-12 19:25:31
【问题描述】：

我需要这样做：http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-donut/

我已经尝试了一段时间，但没有实现我的目标。我将使用的数据需要来自这个 URL https://rawgit.com/guilhermeramos816/accenture/master/poli-piegraph-mar15.csv。经过一番谷歌搜索后，我发现了一些对我有很大帮助的简单示例，但仍然没有弄清楚。

我现在得到的是这样的：

$(function () {
var options = {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'pie'
    },
    title: {
        text: 'Projects'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                color: '#000000',
                connectorColor: '#000000',
                formatter: function () {
                    return '<strong>' + this.point.name + '</strong>: ' + this.y + ' %';
                }
            }
        }
    },
    colors: [
        '#4572A7',
        '#AA4643',
        '#DB843D'
    ],
    series: []
};

$.get('https://rawgit.com/guilhermeramos816/accenture/master/testi.csv', function (data) {
    // Split the lines
    var lines = data.split('\n');
    var series = {
        data: [],
    };

    // Iterate over the lines and add categories or series
    $.each(lines, function (lineNo, line) {
        var items = line.split(',');

        series.data.push({
            type: 'bar',
            name: items[0],
            y: parseFloat(items[1])
        });
    });

    options.series.push(series);
    // Create the chart
    var chart = new Highcharts.Chart(options);
});

【问题讨论】：

添加最后一个 }); 后，您的代码非常好 :-) fiddle

标签： javascript jquery csv highcharts business-intelligence

【解决方案1】：

您的数据需要进行预处理，以便有 2 个系列：第一个是每个主要类别的累积值（内馅饼），第二个是所有点（外馅饼）：

var lines = data.split('\n'),
    mainData = [], // main data - inner pie
  subData = [], // sub data - outer pie
  colorI = -1, 
  prevCat,
  colors = Highcharts.getOptions().colors;


for(var i = 1; i < lines.length  - 1; i++) {
    var line = lines[i].split(',');

  // value
  line[2] = parseFloat(line[2]);

  if(line[0] !== prevCat) {
    // create new main category (data point))
    colorI++;

    mainData.push({
      y: line[2],
      name: line[0],
      color: colors[colorI]
    });

  } else {
    // accumulate data in the last main category (data point)
    mainData[mainData.length - 1].y += line[2];
  }

    // add sub point
  subData.push({
    y: line[2],
    name: line[0] + ': ' + line[1],
    color: colors[colorI]
  });

  prevCat = line[0];
}

现场演示： http://jsfiddle.net/kkulig/au1enef8/

【讨论】：