如何在Highcharts子弹图中设置虚线样式的目标线条？（API无对应选项）

虽然Highcharts的series.bullet.targetOptions中没有直接配置虚线样式的选项，但可以通过以下两种方式实现目标线为虚线的效果：

方法一：通过图表加载事件修改目标线SVG样式 #

子弹图的目标线本质是SVG的<path>元素，我们可以在图表加载完成后，找到该元素并修改其strokeDasharray属性来设置虚线样式。

修改后的完整代码如下：

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
        }]
    }],
    events: {
        load: function() {
            // 获取目标线的SVG路径元素
            const targetPath = this.series[0].points[0].targetElem;
            if (targetPath) {
                // 设置虚线样式，参数可自定义（比如'5,3'表示5px实线+3px空白）
                targetPath.attr({
                    strokeDasharray: '5,3'
                });
            }
        }
    }
});

<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>

方法二：扩展子弹图的目标线绘制逻辑 #

如果需要全局生效，可以通过扩展Highcharts的BulletSeries原型，修改目标线的绘制逻辑，默认添加虚线样式：

// 扩展BulletSeries的drawTarget方法
Highcharts.seriesTypes.bullet.prototype.drawTarget = function(point) {
    const targetOptions = this.options.targetOptions;
    const renderer = this.chart.renderer;
    const shapeArgs = point.shapeArgs;

    // 绘制虚线目标线
    point.targetElem = renderer.path([
        'M', shapeArgs.x, shapeArgs.y,
        'L', shapeArgs.x + shapeArgs.width, shapeArgs.y
    ])
    .attr({
        stroke: targetOptions.color || this.color,
        strokeWidth: targetOptions.borderWidth || 2,
        // 设置虚线样式
        strokeDasharray: '5,3'
    })
    .add(this.group);
};

// 后续图表初始化代码不变
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
        }]
    }]
});

以上两种方法都可以实现你期望的虚线目标线效果，方法一更适合单个图表的定制，方法二则适合全局统一配置。

内容的提问来源于stack exchange，提问作者Baruch Levin