如何移除Highcharts X-range图表中条形内的partialFill数值与百分比

嘿，我来帮你搞定这个问题！你提到设置partialFill: undefined后反而显示0%，这是因为Highcharts会把undefined默认解析成0，所以才会出现这个尴尬的0%文本。下面给你两种针对性的解决方案，按需选择：

方案一：彻底移除所有条形内的文本（最简单） #

如果你不需要任何条形上的数字、百分比或者日期标签，直接把dataLabels.enabled设为false就行，一步到位：

Highcharts.chart('container', {
    chart: { type: 'xrange' },
    title: { text: 'Highcharts X-range' },
    xAxis: { type: 'datetime' },
    yAxis: {
        title: { text: '' },
        categories: ['Prototyping', 'Development', 'Testing'],
        reversed: true
    },
    series: [{
        name: 'Project 1',
        borderColor: 'gray',
        pointWidth: 20,
        data: [
            { x: Date.UTC(2014, 10, 21), x2: Date.UTC(2014, 11, 2), y: 0 },
            { x: Date.UTC(2014, 11, 2), x2: Date.UTC(2014, 11, 5), y: 1 },
            { x: Date.UTC(2014, 11, 8), x2: Date.UTC(2014, 11, 9), y: 2 },
            { x: Date.UTC(2014, 11, 9), x2: Date.UTC(2014, 11, 19), y: 1 },
            { x: Date.UTC(2014, 11, 10), x2: Date.UTC(2014, 11, 23), y: 2 }
        ],
        dataLabels: { enabled: false } // 关闭所有数据标签，彻底移除文本
    }]
});

方案二：只移除partialFill的百分比，保留其他标签 #

如果你还想保留条形上的日期范围这类标签，只是要去掉partialFill带来的百分比，可以单独关闭partialFill的dataLabels，同时不需要设置partialFill: undefined（直接移除该参数或者保留填充值但关闭标签）：

Highcharts.chart('container', {
    chart: { type: 'xrange' },
    title: { text: 'Highcharts X-range' },
    xAxis: { type: 'datetime' },
    yAxis: {
        title: { text: '' },
        categories: ['Prototyping', 'Development', 'Testing'],
        reversed: true
    },
    series: [{
        name: 'Project 1',
        borderColor: 'gray',
        pointWidth: 20,
        partialFill: {
            dataLabels: { enabled: false } // 单独关闭partialFill的百分比标签
        },
        data: [
            { x: Date.UTC(2014, 10, 21), x2: Date.UTC(2014, 11, 2), y: 0, partialFill: 0.25 },
            { x: Date.UTC(2014, 11, 2), x2: Date.UTC(2014, 11, 5), y: 1 },
            { x: Date.UTC(2014, 11, 8), x2: Date.UTC(2014, 11, 9), y: 2 },
            { x: Date.UTC(2014, 11, 9), x2: Date.UTC(2014, 11, 19), y: 1 },
            { x: Date.UTC(2014, 11, 10), x2: Date.UTC(2014, 11, 23), y: 2 }
        ],
        dataLabels: { enabled: true } // 保留普通的日期标签
    }]
});

补充说明：为什么partialFill: undefined会显示0%？ #

Highcharts在处理partialFill参数时，会把undefined默认转换为数值0，所以才会渲染出0%的文本。正确的做法是要么完全移除该参数（不需要部分填充效果时），要么通过上述配置关闭对应的标签。

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