Question

即使关联的轴有visible: false，有没有办法显示情节线？似乎隐藏轴也隐藏了情节线。

更多细节......

我正在绘制一天的图表，如下所示：

我只想在特定时间添加一条垂直线，按“现在”时间排列等等。

如果我使用绘图线，那么轴也显示出来：

我绝对不希望轴显示。

我现在的计划是使用render.rect或render.path在图表上绘制自己的行。还有其他选择吗？

Answer 1

我发现了一个相对简单的解决方案......只需用css隐藏它：

.highcharts-xaxis {
    display: none;
}

和js：

xAxis: {
  type: 'datetime',
  labels:{
      enabled: false
  }
}

Answer 2

您可以通过包装负责重绘轴的方法来extend Highcharts。

  Highcharts.wrap(Highcharts.Axis.prototype, 'redraw', function(p) {
p.call(this);
console.log(this);
var axis = this,
  each = Highcharts.each,
  options = this.options;
// move plot lines and bands
if (!axis._addedPlotLB) { // only first time
  each((options.plotLines || []), function(plotLineOptions) {
    axis.addPlotBandOrLine(plotLineOptions);
  });
  axis._addedPlotLB = true;
}

each(this.plotLinesAndBands, function(plotLine) {
  plotLine.render();
});
});

示例：http://jsfiddle.net/ncs81btt/

上面的解决方案不是很优雅。更好的方法是使用Renderer或隐藏特定的轴元素（标签，刻度等）。

根据绘图线功能的需要，使用渲染器需要进行一些计算。

  var customPlotLines = [{
    value: 5,
    color: 'red',
    width: 3
  }, {
    value: 10,
    color: 'yellow',
    width: 3
  }]

function renderPlotLines() {
 var axis = this.xAxis[0],
     top = axis.chart.plotTop,
     bottom = top + axis.chart.plotHeight,
     path = [
       'M', null, top,
       'L', null, bottom
     ];

 if (!this.customPlotLines) {
   this.customPlotLines = customPlotLines.map(plotLine => {
     return this.renderer.path([]).add();
   });
 }

 this.customPlotLines.forEach((plotLine, i) => {
   var opt = customPlotLines[i];
   path[4] = path[1] = axis.toPixels(opt.value);
   plotLine.attr({
     d: path.join(' '),
     'stroke-width': opt.width,
     stroke: opt.color
   });
 });
}

挂钩加载/重绘事件，因此元素将调整大小。

    chart: {
  zoomType: 'xy',
  events: {
    load: renderPlotLines,
    redraw: renderPlotLines
  }
},

示例：http://jsfiddle.net/ncs81btt/1/

在隐藏轴的高位图中显示情节线？

2 个答案: