Highcharts.js - 在子弹图中，将目标线设为虚线

Question

在 Highcharts 中，我想创建一个子弹图。 但我希望目标线是虚线。 我在目标 API 中没有看到这样的选项。 目标 API 链接：https://api.highcharts.com/highcharts/series.bullet.targetOptions

是否有一些解决方法可以实现这一目标？

文档的子弹图示例： https://jsfiddle.net/api/post/library/pure/

Highcharts.setOptions({
    chart: {
        type: 'bullet'
    },
    legend: {
        enabled: false
    },

    plotOptions: {
        series: {
            pointPadding: 0.25,
            borderWidth: 0,
            color: '#000',
            targetOptions: {
                width: '200%'
            }
        }
    },
    credits: {
        enabled: false
    },
    exporting: {
        enabled: false
    }
});

Highcharts.chart('container', {
    series: [{
        data: [{
            y: 275,
            target: 250
        }]
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

我希望目标线是虚线。

这就是我想要的样子：

提前致谢

Answer 1

目标图形是

rect

SVG 元素，因此无法在其上设置

dashstyle

属性。作为解决方案，您可以渲染一个额外的

path

元素，该元素将部分覆盖默认目标。

例如：

(function(H) {
  H.wrap(H.Series.types.bullet.prototype, 'drawPoints', function(proceed) {
    const chart = this.chart;
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    this.points.forEach(point => {
      const target = point.targetGraphic;
      const bbox = target.getBBox();

      chart.renderer.path([
          'M', bbox.x, bbox.y + bbox.height / 2,
          'L', bbox.x + bbox.width, bbox.y + bbox.height / 2
        ])
        .attr({
          'stroke-width': 3,
          stroke: '#000',
          dashstyle: 'dash'
        })
        .add(target.parentGroup)
    });
  });
}(Highcharts));

---

现场演示：https://jsfiddle.net/BlackLabel/d2hqr1jn/

API 参考： https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path

文档： https://www.highcharts.com/docs/extending-highcharts/extending-highcharts