0

それぞれが 1 つのデータポイントを持つ 2 つの列シリーズを持つハイチャート チャートがあります。意図したとおり、赤いシリーズは黄色のシリーズの後ろにあります (部分的に隠されています)。各シリーズには pointRange があります。赤い列は 3000、黄色の列は 10000 です。以下に示すように、赤い列の幅は実際には 3000 ですが、黄色の列は 10000 に満たない、おそらく 6500 の幅で描かれています。pointRange より狭い黄色の列

フィドル: 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 
        }]
    })
})
4

1 に答える 1

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
}
于 2013-07-08T17:44:57.497 に答える