在 Highstock 中单独的窗格/或样式最大网格线

Question

我构建了一个具有多个 y 轴的小部件，与此处的官方示例非常相似：http://www.highcharts.com/stock/demo/candlestick-and-volume

我正在尝试通过

在图表窗格之间进行某种视觉分离

对每个窗格的最大网格线应用特殊样式，或
在窗格之间的空白处添加一条水平线

我唯一可行的方法是使用 PlotLines，但我更希望有一个独立于缩放级别的分隔符。关于如何实现这一点有什么想法吗？

Answer 1

使用Renderer绘制y轴之间的路径。

function drawSeparator() {
  let separator = this.separator;
  const options = this.options.chart.separator;

  if (options && options.enabled) {
    if (!separator) {
      this.separator = separator = this.renderer.path({
        d: 'M 0 0',
        'stroke-width': options.width === undefined ? 1 : options.width,
        stroke: options.color || 'black'
      }).add();
    }

    const topAxisBottom = this.yAxis[0].top + this.yAxis[0].height;
    const bottomAxisTop = this.yAxis[1].top;
    const y = topAxisBottom + (bottomAxisTop - topAxisBottom) / 2;

    separator.attr({
      d: `M 0 ${y} L ${this.chartWidth} ${y}`
    });
  }
}

在 load/redraw 事件上调用方法

chart: {
  events: {
    load: drawSeparator,
    redraw: drawSeparator
  },
  separator: {
    enabled: true,
    width: 3,
    color: 'blue'
  }
},

可以修改路径的d属性，路径从axis.left开始到axis.left + axis.width结束

实例和输出

http://jsfiddle.net/L11uqxgq/

在 Highstock 中单独的窗格/或样式最大网格线

Separate panes / or style maximum gridlines in Highstock

highstock

实例和输出