两列的pointRange与xAxis.max之间的奇数Highcharts交互 [英] Odd Highcharts interaction between pointRange of two columns and xAxis.max

问题描述

我有一个包含两个列系列的Highcharts图表，每个列都有一个数据点.按照预期，红色系列在黄色系列的后面(部分被遮盖).每个系列都有一个pointRange:红色列为3000，黄色列为10000.正如您在下面看到的那样，红色的列实际上是3000宽，但是黄色的列却画得短于10000，也许是6500.

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.

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

也许由于xAxis.max，黄色列太小，将其设置为9000.当我将此最大值更改为12000时，黄色列校正为10000宽，但是红色列突然从范围0-跳转到右侧.如您所见，从3000扩展到3500-6500.

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.

有没有办法使红色和黄色的列都具有正确的宽度，并使其也从0跨度(即，与Y轴对齐)? Highcharts为什么要这样做，我该如何控制?

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

推荐答案

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

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
}

这篇关于两列的pointRange与xAxis.max之间的奇数Highcharts交互的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！