两列的pointRange与xAxis.max之间的奇数Highcharts交互

Question

我有一个包含两个列系列的 Highcharts 图表，每个列都有一个数据点。正如预期的那样，红色系列在黄色系列后面（部分遮挡）。每个系列都有一个pointRange：红色列为3000，黄色列为10000。正如您在下面看到的，红色列实际上是 3000 宽，但黄色列绘制的宽度小于 10000，可能是 6500。

小提琴：http://jsfiddle.net/Bridgeland/aRHWw/

可能是因为xAxis.max，黄色列太小了，设置为9000。当我将此最大值更改为12000时，黄色列校正为10000宽，但红色列突然向右跳，从跨越0-如您所见，从 3000 到跨越 3500-6500。

有没有办法让红色和黄色列都具有正确的宽度，并让它们从 0 开始，即左对齐到 Y 轴？为什么 Highcharts 会这样做，我该如何控制它？

$(function () {
    $('#container').highcharts({
        chart: { 
            alignTicks: false
        },
        title: {
            text: ""
        },
        yAxis: {
            min: 0,
            max: 1
        },
        xAxis: {
            min: 0,
            endOnTick: false,  
            max: 9000
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        plotOptions: {series: {grouping: false}},
        series: [

        {
            data: [
            1],
            type: "column",
            pointPadding: 0,
            groupPadding: 0,
            color: "red",
            pointRange: 3000,
            borderWidth: 0,
            shadow: false,
            pointPlacement: "between",
            zIndex: 0,
            minPointLength: 3 
        }, {
            data: [
            0.5],
            type: "column",
            pointPadding: 0,
            groupPadding: 0,
            color: "yellow",
            pointRange: 10000,
            borderWidth: 0,
            shadow: false,
            pointPlacement: "between",
            zIndex: 1,
            minPointLength: 3 
        }]
    })
})

Answer 1

据我了解，pointPlacement: 'between' 正在“告诉”图表在其定界刻度之间绘制列。因此，如果您将其设置为 on，它会将其绘制在刻度线的“顶部”，即为零。因为它的 pointRange 是 3000，所以你最终会得到 1500 到零的任一侧，所以你还必须将其填充到右侧，将其 pointStart 设置为 1500。

“红色”系列必须定义为：

{
    data: [1],
    type: "column",
    pointPadding: 0,
    groupPadding: 0,
    color: "red",
    pointStart: 1500,
    pointRange: 3000,
    borderWidth: 0,
    shadow: false,
    pointPlacement: 'on',
    zIndex: 0,
    minPointLength: 3
}