javascript - Highcharts - 带有目标线的柱形图/条形图

Question

使用 highcharts ，在柱形图或条形图上实现目标线的最佳方式是什么？ (也称为目标 vs 目标)

从类似的d3.js线程中找到这张图片作为示例:

我正在考虑另一个系列，但在文档中没有看到任何关于目标行的选项。这是一个基本的柱形图:jsfiddle.net/eksh8a8p/

我考虑过使用 columnrange 系列，但您仅限于具有开始/结束值，这可能会因数字值的缩放而出现问题。

是否有其他想法/选项可以产生与上图类似的结果？

Answer 1

您可以使用 columnrange 系列，但有一个更简单的选项 - 带有矩形标记的散点系列

    //custom marker
    Highcharts.SVGRenderer.prototype.symbols['c-rect'] = function (x, y, w, h) {
       return ['M', x, y + h / 2, 'L', x + w, y + h / 2];
    };

    //series options
    {
      marker: {
        symbol: 'c-rect',
        lineWidth:3,
        lineColor: Highcharts.getOptions().colors[1],
        radius: 10
      },
      type: 'scatter'

示例:http://jsfiddle.net/eksh8a8p/1/