以编程方式编辑Highcharts.js甜甜圈数据

Editing Highcharts.js donut data programmatically va JS

本文关键字：js 甜甜圈 数据 Highcharts 编辑 编程 方式      更新时间：2023-09-26

我试图对donut做同样的事情(以编程方式编辑donut数据)，但是代码不适合我，尽管这里的语法似乎很简单。

我的目标是在甜甜圈中找到与给定x轴值对应的数据点，并将该值设置为10。有什么想法吗?

这是JSFIddle

btnEdit.click(function() {
    // chart.series[0].data[0].update(x += 10); - this code doesn't work
    var x = prompt("Please enter your name");
    // find the data point that corresponds to x
    // Set it to 10
  });

实际上，您正在通过其名称查找点，而不是通过其x值查找点，因为x值是一个数字，而名称是一个字符串(对于分类数据，这两者之间存在自然映射)。

btnEdit.click(function() {
// chart.series[0].data[0].update(x += 10); - this code doesn't work
var i = 0,
    points = chart.series[0].data,
    len = points.length,
    x = prompt("Please enter your name"),
    point;
for (; i < len; i++) {
    point = points[i];
    if (point.name === x) {
      point.update({
        y: 10
      });
      break;
    }
}
// find the data point that corresponds to x
// Set it to 10
});

示例:http://jsfiddle.net/caLv5d6x/3/

上面的解决方案假设您的点的名称是唯一的-但它不一定是这样的。

: 
 btnEdit.click(function() {
// chart.series[0].data[0].update(x += 10); - this code doesn't work
  var x = prompt("Please enter your name");
chart.series[0].data.forEach(function (point) {
    if (point.name === x) {
    point.update({
        y: 10
    }, false, false);
  }
});
chart.redraw();
// find the data point that corresponds to x
// Set it to 10
});

示例:http://jsfiddle.net/caLv5d6x/4/

相关文章：