Question

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

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

这里重要的是用户对第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]
    });
});

这是一个简化的示例：https://jsfiddle.net/RuneS/soh8vw79/10/

Answer 1

@jlbriggs是正确的。尽管update()的文档什么都没说，但setData()的文档中却提到：更新系列数据时，默认行为是更新原始数据数组中的值，而不是更新替换整个数组。

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

通过使用setData()参数调用updatePoints而不是使用update()发送数据来强制Highcharts替换数据阵列：

$("#sel").change(function() {
    var unit = this.value,
        val = data[unit],
        ser = chart.series[2];

    ser.update({ name: unit }, false);

    //... false): Replace the series' data array instead of updating its values,
    //(which would alter the original array in the global `data` object).
    //https://api.highcharts.com/class-reference/Highcharts.Series#setData
    ser.setData(val, true, true, false);
});

https://jsfiddle.net/soh8vw79/22

不要给Highcharts原始数组，而是它的副本。这样，更新值将不会影响原始数据（类似于@jlbriggs解决方案）。 增加了奖励：流畅的动画：

...
series: [{
    name: "10 - Name 1",
    data: data["10 - Name 1"]
}, {
    name: "1001 - Name 2",
    data: data["1001 - Name 2"]
}, {
    name: "1000 - Name 3",
    //Here, we use `.slice()` to make a copy of the original array,
    //so that future updates don't change the original values in the global `data` object:
    data: data["1000 - Name 3"].slice()
}],
...

https://jsfiddle.net/soh8vw79/23

根据下拉菜单更新Highcharts柱形图

1 个答案: