基于下拉菜单更新Highcharts柱形图

我正在尝试让Highcharts执行以下操作：我想显示一个包含三列的柱状图。第一个是保持不变，第三个是根据用户从下拉菜单中选择的内容进行多次更新

从下拉菜单中选择，我可以更新第三列。如果最初显示名称3，则从下拉菜单中选择名称4将正确替换该列。选择名称5会导致另一个正确的替换。但是，如果再次选择名称3，则只有标签会更新，而工具提示中的列和y值不会更新。因此，它将显示名称3，但使用名称5的y值。如何纠正这种行为

这里重要的是第3列的用户控制。如果比较容易的话，最初只显示2列是可以的

代码：

var data = {
    "10 - Name 1": [700000],
    "1001 - Name 2": [750000],
    "1000 - Name 3": [800000],
    "1002 - Name 4": [900000],
    "1003 - Name 5": [950000]
};
var chart = Highcharts.chart('fig8', {
    chart: {
        type: 'column',
        animation: true
    },
    series: [{
        name: "10 - Name 1",
        data: data["10 - Name 1"]
    }, {
        name: "1001 - Name 2",
        data: data["1001 - Name 2"]
    }, {
        name: "1000 - Name 3",
        data: data["1000 - Name 3"]
    }],
    title: {
        text: 'Some metric'
    },
    subtitle: {
        text: 'Choose unit from drop down to alter third column'
    },
    xAxis: {
        labels: {
            enabled: false
        }
    }
});
$("#sel").change(function() {
    chart.series[2].update({
        name: this.value,
        data: data[this.value]
    });
});

---

这里有一个简单的例子：

@jlbigs是正确的。虽然的文档没有对此做任何说明，但在文档中提到：更新序列数据时，默认行为是更新原始数据数组中的值，而不是替换整个数组

在您的情况下，这意味着当您从下拉列表中选择时，名称3的值将被其他值覆盖。至少有两种方法可以解决此问题：

通过使用updatePoints参数调用setData，而不是使用update发送数据，强制Highcharts替换数据数组：

$sel.changefunction{ var单位=此值， val=数据[单位]， ser=图表系列[2]； 序列更新{name:unit}，false； //…false：替换序列的数据数组，而不是更新其值， //这将改变全局“data”对象中的原始数组。 //https://api.highcharts.com/class-reference/Highcharts.SeriessetData ser.setDataval，真，真，假； }; 不要给Highcharts原始数组，而是它的副本。这样，更新值不会影响与@jlbiggs解决方案类似的原始数据。增加的好处：平滑动画：

... 系列：[{ 名称：10-名称1， 数据：数据[10-名称1] }, { 名称：1001-名称2， 数据：数据[1001-名称2] }, { 名称：1000-名称3， //在这里，我们使用“.slice”复制原始数组， //以便将来的更新不会更改全局“data”对象中的原始值： 数据：数据[1000-名称3]。切片 }], ...

---

简而言之，您正在创建对该数据对象的引用，并且每次更新选择框都会更新实际的数据对象，并且通过更新引用该对象的系列数据，选项3的对象值将被上一次选择覆盖。可能有更好的解决方案，但简单的方法是为选择框创建一个对象，为图表配置创建另一个对象：