Highcharts如何隐藏标记点间连线？设lineWidth=0仍有细线

针对设置lineWidth: 0后仍有细线残留的问题，除拆分系列外，还有两种更直接的解决方法：

方法1：切换为散点图（Scatter）系列 #

散点图系列默认不渲染点之间的连线，完全匹配只显示标记点的需求。只需在系列配置中添加type: 'scatter'即可：

series: [
    {
        type: 'scatter', // 添加该配置
        animation: {
            duration: 5000
        },            
        name: 'Sensor',
        color: 'RGBA(255,0,47,0.6)',
        // 其余配置保持不变
    }
]

方法2：优化线系列配置（保留线系列特性） #

若需保留线系列的部分特性，可通过以下配置彻底隐藏连线：

• 确保lineWidth: 0
• 禁用hover状态下的线宽增加，避免交互时出现细线
• 可选：设置连线颜色为透明，双重保障

修改后的系列配置片段：

series: [
    {
        animation: {
            duration: 5000
        },            
        lineWidth: 0,
        lineColor: 'transparent', // 强制连线透明
        states: {
            hover: {
                lineWidthPlus: 0 // 禁止hover时线宽增加
            }
        },
        name: 'Sensor',
        color: 'RGBA(255,0,47,0.6)',
        // 其余配置保持不变
    }
]

另外注意：代码中plotOptions.series.pointWidth: -5是无效配置——pointWidth是柱状图（column）系列的属性，对线系列无作用，建议删除以避免潜在渲染异常。

修改后的完整代码 #

Highcharts.chart('container', {
    chart: {
        backgroundColor: 'transparent'
    },
    credits: false,

    navigation: {
        buttonOptions: {
            theme: {
                fill: 'white',
                padding: 5,
                stroke: 'none'
            }
        }
    },

    title: {
        text: null
    },

    subtitle: {},

    xAxis: [{
        visible: true,
        offset: 0.1,
    }, {
        visible: false
    }],
    plotOptions: {
        series: {}
    },

    yAxis: [{
        visible: true,
        reversed: true,
        gridLineWidth: 0,
        title: {
            text: 'MD (m)',
            style: {
                fontSize: '10px'
            }
        },
        min: 2000,
        max: 6500
    }, {
        opposite: true,
        gridLineWidth: 0,
        title: {
            text: null,
        }
    }],

    legend: {
        enabled: false
    },

    series: [
        {
            type: 'scatter',
            animation: {
                duration: 5000
            },            
            name: 'Sensor',
            color: 'RGBA(255,0,47,0.6)',
            data: [
                [2000.5, 5601, 5603],                
                [2000.5, 6815, 6817]
            ],
            dataLabels: {
                enabled: false
            },
            marker: {
                enabled: true,
                radius: 6,
                symbol: "triangle-down"                
            },            
            enableMouseTracking: true
        }
    ]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container"></div>

内容的提问来源于stack exchange，提问作者Arthur Lucas