javascript - 隐藏零值的图例

Question

我发现相邻显示两个图表非常具有挑战性，因此两个图表区域的长度应相等。

但由于某些图例中甚至存在间隙，我想我可以在我的(抱歉，CSV)数据中提供零或 null 作为值，然后隐藏相应的图例。我尝试了 legendFormatter，它可以隐藏文本，但不能隐藏颜色方 block 。

通过隐藏，我的意思是留下空白来代替空值。

Picture of desired result

你能帮忙吗？我对 jQuery 还很陌生。

Firefox 40
IE  20
Chrome  15
Edge    10
Safari  5
null    0
Other   7
Text browsers   3

这个 fiddle 是一个开始。我用一些修正液隐藏了图例。

http://jsfiddle.net/3zqeqq38/

Answer 1

您可以包装 Legend.prototype.renderItem 方法，并决定图例项是否可见。片段:

(function(H) {
  H.wrap(H.Legend.prototype, 'renderItem', function (p, item) {
    p.call(this, item);

    if(item.y === 0) {
      item.legendGroup.hide();
    } else {
      item.legendGroup.show();
    }
  });
})(Highcharts)

演示:http://jsfiddle.net/e48xa51L/