Question

我们可以通过索引从数组中获取任何PlotLine：

var plotLine = $('#container').highcharts().xAxis[0].plotLinesAndBands[0];

但是，当我们有许多动态的PlotLines时，这种方式并不简单。有没有办法通过id轻松获取PlotLine？

喜欢删除：

chart.xAxis[0].removePlotLine('plotline-1');

Answer 1

我发现只有完整的数组迭代方法：

for (var i = 0; i < axis.plotLinesAndBands.length; i++) {
  if (axis.plotLinesAndBands[i].id === plotLineId) {
    return axis.plotLinesAndBands[i];
  }
}

Answer 2

您可以使用Axis原型的removePlotBandOrLine（）函数中的部分逻辑来创建并添加一个名为getPlotLineOrBand的新函数原型。它将循环遍历所有绘图带/线并返回id为右的那个。

$(function(H) {
  H.AxisPlotLineOrBandExtension.getPlotLineOrBand = function(id) {
    var plotLinesAndBands = this.plotLinesAndBands,
     i = plotLinesAndBands.length;

    while (i--) {
      if (plotLinesAndBands[i].id === id) {
        return plotLinesAndBands[i];
      }
    }

    return;
  };

  H.extend(H.Axis.prototype, H.AxisPlotLineOrBandExtension);
}(Highcharts));

实施例： http://jsfiddle.net/d_paul/g9sf75ju/

Answer 3

您可以定义使用div附加的plotLine Id。因为所有div都具有不同的id，所以plotLine将始终具有唯一的ID。

看一下我在项目中实现的类似功能：

  var plotId = divId + 'plot-line-scatter';
        var chartX = $( '#' + divId + '' ).highcharts();
        if(null != chartX){
            chartX.xAxis[0].removePlotLine( plotId );
            chartX.xAxis[0].addPlotLine( {
                value : time,
                color : '#FF0000',
                width : 1,
                id : plotId
            } );

Answer 4

我正在寻找一个解决方案，通过id获取plotBand以隐藏它的系列。基于r00tGER的片段，我做了一个函数来调用：

/**
 * Get the plotBand or plotLine with given id out of all plotBands and plotLines of one Axis
 * @param id The id of the plotBand or plotLine you are looking for
 * @param axis The axis where the plotBand/plotLine is bound
 */
function getPlotBandOrLineById(id, axis) {
  // loop through all plotBands/plotLines and check their id
  for (var i = 0; i < axis.plotLinesAndBands.length; i++) {
    if (axis.plotLinesAndBands[i].id === id) {
      return axis.plotLinesAndBands[i];
    }
  }
}

使用该功能，您可以隐藏并显示plotBand（或plotLine）及其系列：

$(function () {
  $('#chart_container').highcharts('StockChart', {
    ...
    series: [
      {
        name: 'Carbs',
        ...
        events: {
          show: function () {
            var plotBand = getPlotBandOrLineById('goal_carbs', this.chart.yAxis[0]);
            plotBand.hidden = false;
            plotBand.svgElem.show();
          },
          hide: function () {
            var plotBand = getPlotBandOrLineById('goal_carbs', this.chart.yAxis[0]);
            plotBand.hidden = true;
            plotBand.svgElem.hide();
          },
        },
      },
    ],
    ...
  });
});

Highcharts通过id获得PlotLine

4 个答案: