更新饼图的特定切片

时间:2016-08-24 08:27:29

标签: javascript highcharts

我的highcharts饼图数据如下:

series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
        name: 'Microsoft Internet Explorer',
        y: 56.33
    }, {
        name: 'Chrome',
        y: 24.03,
        sliced: true,
        selected: true
    }, {
        name: 'Firefox',
        y: 10.38
    }, {
        name: 'Safari',
        y: 4.77
    }, {
        name: 'Opera',
        y: 0.91
    }, {
        name: 'Proprietary or Undetectable',
        y: 0.2
    }]
}]

我知道我可以通过执行以下操作来更新第一个切片的y value

var chart = $('#pie_chart').highcharts();
chart.series[0].data[0].update(100);

或者我可以使用json更改所有数据:

chart.series[0].setData(json);

但是如何根据它的名称更改特定切片的值。例如,如果我不知道切片的顺序(例如:我需要按名称引用它),如何更改Firefox切片的y value

1 个答案:

答案 0 :(得分:1)

您可以迭代数据以找到合适的索引。

var series = [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
        name: 'Microsoft Internet Explorer',
        y: 56.33
    }, {
        name: 'Chrome',
        y: 24.03,
        sliced: true,
        selected: true
    }, {
        name: 'Firefox',
        y: 10.38
    }, {
        name: 'Safari',
        y: 4.77
    }, {
        name: 'Opera',
        y: 0.91
    }, {
        name: 'Proprietary or Undetectable',
        y: 0.2
    }]
}]
var i;
var idxFound = -1;
for (i = 0; i < series[0].data.length; i++) {
    if (series[0].data[i].name === 'Firefox') {
    idxFound = i;
    break;
  }
}
if (idxFound !== -1) {
    series[0].data[idxFound].y = 9;
    console.log(series[0].data[idxFound]); // { name: 'Firefox', y: 9 }
}

如果jQuery是你的东西,你可以尝试以下方法,让newArray为你存储具有相同索引的用户代理名称。然后你可以在newArray中查找:

var newArray = $.map(series[0].data, function (obj, i) { return obj.name; });
var i = newArray.indexOf('Firefox');
series[0].data[i].y = 9;
console.log(series[0].data[i]); //  Object { name="Firefox",  y=9}

但是如果没有jQuery来制作newArray就可以轻松完成。