javascript - 更新饼图的特定部分

Question

我的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 值:

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

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

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

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

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