Question

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

我已经尝试了一段时间但没有实现我的目标。我将使用的数据需要来自此网址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);
});

Answer 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/

Pie-donut使用.csv

1 个答案: