You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何移除Highcharts X-Range图表中系列间的间距与内边距?

Highcharts X-Range多系列Y轴偏移问题

我尝试移除Highcharts X-Range图表中系列间的额外间距/内边距,目的是让分属不同系列的数据点对应正确的Y轴值。仅使用单个系列时显示正常,但添加第二个系列后所有元素出现偏移。官方文档显示设置pointPlacement: 'on'可解决该问题,但实际无效。

双系列示例(Y轴位置错误)

Highcharts.chart('container', {
    chart: {
        type: 'xrange',
        pointPlacement: 'on'
    },
    title: {
        text: 'Highcharts X-range'
    },
    plotOptions: {
      series: {
        pointPlacement: 'on'
      }
    },
    xAxis: {
        type: 'datetime',
        min: Date.UTC(2014, 10, 21, 0, 0),
        max: Date.UTC(2014, 10, 21, 24, 0),
        gridLineWidth: 1,
        labels: {
            format: '{value:%H}',
            tickInterval: 3600 * 1000
        }
    },
    yAxis: {
          gridLineWidth: 1,
        min: 0,
        title: {
            enabled:false
        }
    },
    series: [{
        name: 'Project 1',
        className: "series_0",
        pointPadding: 0,
        pointWidth: 5,
        groupPadding: 0,
        data: [
            {
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 1
        },{
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 2
        }, 
        ],
        dataLabels: {
            enabled: true
        }
    },
    {
        name: 'Project 2',
        className: "series_1",
        pointPadding: 0,
        pointWidth: 5,
        groupPadding: 0,
        data: [
            {
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 3
        },{
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 4
        }, 
        ],
        dataLabels: {
            enabled: true
        }
    }
    ]
});

单系列示例(Y轴位置正确)

Highcharts.chart('container', {
    chart: {
        type: 'xrange',
        pointPlacement: 'on'
    },
    title: {
        text: 'Highcharts X-range'
    },
    plotOptions: {
      series: {
        pointPlacement: 'on'
      }
    },
    xAxis: {
        type: 'datetime',
        min: Date.UTC(2014, 10, 21, 0, 0),
        max: Date.UTC(2014, 10, 21, 24, 0),
        gridLineWidth: 1,
        labels: {
            format: '{value:%H}',
            tickInterval: 3600 * 1000
        }
    },
    yAxis: {
          gridLineWidth: 1,
        min: 0,
        title: {
            enabled:false
        }
    },
    series: [{
        name: 'Project 1',
        className: "series_0",
        pointPadding: 0,
        pointWidth: 5,
        groupPadding: 0,
        data: [
            {
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 1
        },{
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 2
        }, 
        ],
        dataLabels: {
            enabled: true
        }
    }
    ]
});

内容的提问来源于stack exchange,提问作者ThisIsMe

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.30 21:24:50