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}`
    });
  }
}

在加载/重绘事件

上调用方法

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

您可以修改路径的属性，路径从axis.left开始，在axis.left + axis.width停止

实例和输出

http://jsfiddle.net/L11uqxgq/