Highcharts - 在legendItemClick上显示和隐藏绘图线和条带的问题

时间:2013-02-21 21:32:19

标签: javascript jquery highcharts

我有一个图表,我有几个x轴plotLines和plotBands。 我有一个函数,在legendItemClick上,将显示/隐藏plotLines和Bands。 (它是具有正常曲线重叠和标记的stdev水平的直方图)

图表和代码可以在这里看到:http://jsfiddle.net/jlbriggs/FnhRV/

function toggleBands(chart) {
  $.each(chart.xAxis[0].plotLinesAndBands, function(index,el){
    if(el.svgElem != undefined) {
      el.svgElem[ el.visible ? 'show' : 'hide' ]();
      el.visible = !el.visible;
    }
  });
}

问题:当显示或隐藏其他系列时,x轴相应缩放,如果任何绘图线或条带从比例下降,则行为开始变得暗淡。

在发布的示例中,如果隐藏正常曲线系列,则最外面的绘图线将位于x轴的边界之外。 一旦发生这种情况,每次隐藏它们时这两行都会重新出现,点击各种图例项将导致隐藏/可见的各种状态不应该出现。

如果系列的轴线总是保持足够宽,那么这个错误就不会发生,并且显示和隐藏将很乐意按照预期发生。

有谁能告诉我为什么会这样,和/或提供解决方案? 提前谢谢

杰米

{{编辑: 设置最小值和最大值以匹配曲线值将无助于这种情况,因为所需的可用性是用户可以隐藏曲线并查看缩放到直方图数据的图表。

2 个答案:

答案 0 :(得分:6)

PlotLinesplotBands将返回,因为当再次显示轴时,它还应渲染所有plotLines和plotBands。然后你无法轻松控制plotLines和plotBands。怎么解决?而不是隐藏/显示SVG元素,删除plotLines / plotBands或根据需要添加它们。以下是您的解决方案:http://jsfiddle.net/FnhRV/19/

答案 1 :(得分:0)

我建议设置最小/最大值。

http://jsfiddle.net/jlbriggs/FnhRV/

    min:-3,
    max:3,
    showEmpty: true,