更新餅圖的特定部分

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 value ：

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

或者我可以使用json更改所有數據：

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

但是如何根據其名稱更改特定切片的值。 例如，如果不知道切片的順序（即：我需要按名稱引用），如何更改Firefox切片的y value ？

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即可輕松完成。