在高图表堆叠条形图中的对象中存在空值的情况下，图表中的显示空间

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"包含空值作为第四个参数，因此，除了不显示数据，我们还需要在图表中分组的条形图之间显示空格

Answer 1

这里是将空字符串替换为空的示例代码：

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);

Answer 2

但是留出空间会干扰图表的可读性。现在，一个堆叠的条形图在yAxis上的值为7（0-7），第二个条形图的值为2（7-9），将它们显示为图表上的总和9。如果您将为null值留出空间，它将使上一点向上移动。

我想到的唯一解决方案（这不是完美的，因为它会稍微影响图表的可读性）是将一个值设置为非常小的值和白色，并禁用在工具提示中显示此点。

参见：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