Odd Highcharts interaction between pointRange of two columns and xAxis.max

问题

I have a Highcharts chart with two column series, each with a single datapoint. The red series is behind (partially obscured) by the yellow series, as intended. Each series has a pointRange: 3000 for the red column, 10000 for the yellow column. As you can see below, the red column is in fact 3000 wide, but the yellow column is drawn something short of 10000, perhaps 6500.

Fiddle: http://jsfiddle.net/Bridgeland/aRHWw/

Maybe the yellow column is too small because of xAxis.max, set to 9000. When I change this max to 12000, the yellow column corrects to 10000 wide, but the red column suddenly jumps to the right, from spanning 0-3000 to spanning 3500-6500, as you can see.

Is there any way to have both the red and yellow columns the correct width, and to also have them spanning from 0, i.e. left aligned to the Y axis? Why is Highcharts doing this, and how can I control it?

$(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 
        }]
    })
})

回答1:

As far as I understand it, pointPlacement: 'between' is "telling" the chart to draw the column between its delimiting ticks. So, if you set it instead to on it'll draw it "on top" of the tick, which is zero. Since it's pointRange is 3000, you'll end up with 1500 to either side of zero, so you must also pad it to the right setting its pointStart to 1500.

The "red" series will then have to be defined as:

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

来源：https://stackoverflow.com/questions/17531557/odd-highcharts-interaction-between-pointrange-of-two-columns-and-xaxis-max

标签

javascript

Highcharts