Обновление диаграммы столбцов Highcharts на основе выпадающего меню

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» перезаписывается другими значениями при выборе из выпадающего списка. Есть как минимум два способа это исправить:

1. Вынудить Highcharts заменить массив данных, вызвав setData() с параметром updatePoints вместо отправки данных с update():

   $("#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

2. Не указывайте 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