Highchart饼图无法正常工作

Question

我正在使用Highchart在我的网站上显示图表。饼图中存在问题。当我增加饼图中的结果数量时，饼图无法正确呈现。

这是小提琴：http://jsfiddle.net/d2y4znub/

Highcharts.chart('container', {

chart: {
    type: 'solidgauge',
    marginTop: 60
},

title: {
    text: 'Activity',
    style: {
        fontSize: '24px'
    }
},

tooltip: {
    borderWidth: 0,
    backgroundColor: 'none',
    shadow: false,
    style: {
        fontSize: '12px'
    },
    pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
    positioner: function (labelWidth) {
        return {
            x: 160 - labelWidth / 2,
            y: 130
        };
    }
},

pane: {
    startAngle: 0,
    endAngle: 360,
    background: [{ // Track for Exercise
        outerRadius: '136%',
        innerRadius: '112%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
        borderWidth: 0
    },{ // Track for Move
        outerRadius: '111%',
        innerRadius: '88%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(),
        borderWidth: 0
    }, { // Track for Exercise
        outerRadius: '87%',
        innerRadius: '63%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
        borderWidth: 0
    }, { // Track for Stand
        outerRadius: '62%',
        innerRadius: '38%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[3]).setOpacity(0.3).get(),
        borderWidth: 0
    }]
},

yAxis: {
    min: 0,
    max: 100,
    lineWidth: 0,
    tickPositions: []
},

plotOptions: {
    solidgauge: {
        dataLabels: {
            enabled: false
        },
        linecap: 'round',
        stickyTracking: false,
        rounded: true
    }
},

series: [{
    name: 'AngularJS',
    borderColor: Highcharts.getOptions().colors[0],
    data: [{
        color: Highcharts.getOptions().colors[0],
        radius: '136%',
        innerRadius: '113%',
        y: 25
    }]
},{
    name: 'Nodejs',
    borderColor: Highcharts.getOptions().colors[1],
    data: [{
        color: Highcharts.getOptions().colors[1],
        radius: '112%',
        innerRadius: '88%',
        y: 25
    }]
},  
{
    name: 'Angular js',
    borderColor: Highcharts.getOptions().colors[2],
    data: [{
        color: Highcharts.getOptions().colors[2],
        radius: '87%',
        innerRadius: '62%',
        y: 10
    }]
}, {
    name: 'Jquery',
    borderColor: Highcharts.getOptions().colors[3],
    data: [{
        color: Highcharts.getOptions().colors[3],
        radius: '61%',
        innerRadius: '38%',
        y: 18
    }]
}]
},


/**
 * In the chart load callback, add icons on top of the circular shapes
  */
 function callback() {

// Move icon
this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8])
    .attr({
        'stroke': '#',
        'stroke-linecap': 'round',
        'stroke-linejoin': 'round',
        'stroke-width': 2,
        'zIndex': 10
    })
    .translate(190, 26)
    .add(this.series[2].group);

// Exercise icon
this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8, 'M', 8, -8, 'L', 16, 0, 8, 8])
    .attr({
        'stroke': '#',
        'stroke-linecap': 'round',
        'stroke-linejoin': 'round',
        'stroke-width': 2,
        'zIndex': 10
    })
    .translate(190, 61)
    .add(this.series[2].group);

// Stand icon
this.renderer.path(['M', 0, 8, 'L', 0, -8, 'M', -8, 0, 'L', 0, -8, 8, 0])
    .attr({
        'stroke': '#',
        'stroke-linecap': 'round',
        'stroke-linejoin': 'round',
        'stroke-width': 2,
        'zIndex': 10
    })
    .translate(190, 96)
    .add(this.series[2].group);

    this.renderer.path(['M', 0, 8, 'L', 0, -8, 'M', -8, 0, 'L', 0, -8, 8, 0])
    .attr({
        'stroke': '#',
        'stroke-linecap': 'round',
        'stroke-linejoin': 'round',
        'stroke-width': 2,
        'zIndex': 10
    })
    .translate(190, 130)
    .add(this.series[2].group);

});