Отобразить пространство на графике в случае нулевого значения, присутствующего в объекте в столбчатой ​​диаграмме с большими диаграммами

Question

series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2]
    }, {
        name: 'Jane',
        data: [2, 2, 3, null, 1]
    }, {
        name: 'Joe',
        data: [3, 4, 4, 2, 5]
    }]

Например, в приведенном выше объекте "Jane" содержит нулевое значение в качестве 4-го параметра, поэтому вместо того, чтобы не отображать данные, нам нужно отобразить пространство между сгруппированными столбцами на диаграмме

Answer 1

Но пробел нарушит удобочитаемость диаграммы. Теперь один столбец с накоплением имеет значение 7 (0-7) на оси y, а второй - значение 2 (7-9), что показывает их как сумму 9 на графике. Если вы сделаете пространство для нулевого значения, оно переместит верхнюю точку выше.

Единственное решение, которое пришло мне в голову (которое не идеально, потому что оно немного нарушает читаемость графика), это установить точка с очень маленьким значением и белым цветом и отключенная, показывающая эту точку во всплывающей подсказке.

См .: https://jsfiddle.net/BlackLabel/xwbtk9yr/

series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2]
    }, {
        name: 'Jane',
        data: [2, 2, 3, {y: 0.2, color: 'white', }, 1]
    }, {
        name: 'Joe',
        data: [3, 4, 4, 2, 5]
   }]

API: https://api.highcharts.com/highcharts/tooltip.formatter

Answer 2

Вот пример кода для замены нуля пустой строкой:

let obj = {
  series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2]
  }, {
    name: 'Jane',
    data: [2, 2, 3, null, 1]
  }, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5]
  }]
};

let obj1 = JSON.stringify(obj, (k, v) => {
  if (v === null) {
    return ""; // change null to empty string
  } else {
    return v; // return unchanged
  }
})

obj = JSON.parse(obj1);