如何在高图表多轴中显示y轴差异

Question

如何创建以不同颜色显示多轴差异的多轴图表。 （如何在附加的图像中显示橙色）

期望的图形。

Answer 1

最简单的方法是将柱形图使用2个系列（橙色和灰色）并将plotOptions.grouping属性设置为false。我添加了另外两个禁用了mouseTracking的线系列，以及与图像上的标记相似的标记。另外，我格式化了工具提示以显示橙色的超出值。

十字标记SVG：

Highcharts.SVGRenderer.prototype.symbols.cross = function(x, y, w, h) { return ['M', x, y, 'L', x + w, y + h, 'M', x + w, y, 'L', x, y + h, 'z']; };

plotOptions.grouping：

plotOptions: { column: { borderWidth: 0, grouping: false } },

我们的系列：

var orangeData = [1, 3, 8, 13, 11, 13, 15, 25, 29, 31, 27, 25, 16, 11, 10, 4, 4, 8, 2, 1, 1],
  greyData = [3, 4, 11, 11, 12, 14, 15, 21, 25, 25, 23, 21, 15, 13, 12, 5, 5, 4, 2, 1, 1];

series: [{
    data: orangeData,
    color: '#f7931e',
    tooltip: {
      pointFormatter: function() {
        return 'Orange value is higher than grey value by: ' + (orangeData[this.index] - greyData[this.index])
      }
    }
  }, {
    type: 'line',
    data: orangeData,
    color: '#ec1c24',
    marker: {
      symbol: 'cross',
      lineColor: null,
      lineWidth: 2
    },
    enableMouseTracking: false
  }, {
    data: greyData,
    color: '#989898'
  }, {
    type: 'line',
    data: greyData,
    color: '#231f20',
    enableMouseTracking: false
  }]

您可以看一下jsFiddle演示：

https://jsfiddle.net/BlackLabel/xpwdhrvz/