Question

我有一个图表，它有两个样条和一个理想情况下会反转的列范围，因此条形水平运行，xAxis值将在y轴上。

代码的相关部分：

$(function () {
$('#container').highcharts({
    chart: {
        //type: 'spline'
        //inverted: true,
    },
    credits: {
        enabled: false
    },

    title: {
        text: 'Polygon Graph: 109470 - North Penrith'
    },

    xAxis: [{


        type: 'datetime',


    }, {
        type: 'category',
        categories: ['Planning', 'Bulk Earthworks', 'DA Design', 'CC Design']

    }],
    yAxis: [{
        opposite: true,
        labels: {
            format: '${value:,.0f}'

        },

        title: {
            text: 'Value ($)'

        },

        min: 0



    }, {
        type: 'datetime',


    }],

    plotOptions: {
        columnrange: {
            dataLabels: {
                enabled: true,
                formatter: function () {
                    var d = new Date(this.y);
                    return d.getDate();
                }
            }
        }
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %b %y', this.x) + ': ' + ' $' + this.y;
        }

    },

    series: [{
        name: 'Expected Costs',

        data: [
            [Date.UTC(2013, 9, 29), 145000],
            [Date.UTC(2013, 10, 6), 140000],
            [Date.UTC(2013, 10, 13), 133000],
            [Date.UTC(2013, 10, 20), 125000],
            [Date.UTC(2013, 10, 27), 116000],
            [Date.UTC(2013, 11, 3), 106000],
            [Date.UTC(2013, 11, 10), 101000],
            [Date.UTC(2013, 11, 17), 96000],
            [Date.UTC(2013, 11, 24), 94000],
            [Date.UTC(2013, 12, 1), 82000],
            [Date.UTC(2013, 12, 8), 70000],
            [Date.UTC(2013, 12, 15), 58000],
            [Date.UTC(2013, 12, 22), 33000],
            [Date.UTC(2013, 12, 29), 8000],


            ],
        color: 'red'

    }, {
        name: 'Actual Costs',
        data: [
            [Date.UTC(2013, 9, 29), 135000],
            [Date.UTC(2013, 10, 6), 133000],
            [Date.UTC(2013, 10, 13), 125000],
            [Date.UTC(2013, 10, 20), 116000],
            [Date.UTC(2013, 10, 27), 104000],
            [Date.UTC(2013, 11, 3), 89000],
            [Date.UTC(2013, 11, 10), 84000],
            [Date.UTC(2013, 11, 17), 78000],
            //[Date.UTC(2013,11,24),75000  ],
            //                  [Date.UTC(2013,12,1),64000  ],
            //                  [Date.UTC(2013,12,8),59000  ],
            //                  [Date.UTC(2013,12,15),50000  ],
            //                  [Date.UTC(2013,12,22),25000  ],
            //                  [Date.UTC(2013,12,29),0  ]

            ],
        color: 'green'
    }, {
        name: 'Projected Costs',
        data: [
        //[Date.UTC(2013,9,29),135000  ],
        //                  [Date.UTC(2013,10,6),133000  ],
        //                  [Date.UTC(2013,10,13),125000  ],
        //                  [Date.UTC(2013,10,20),116000  ],
        //                  [Date.UTC(2013,10,27),104000  ],
        //                  [Date.UTC(2013,11,3),89000  ],
        //                  [Date.UTC(2013,11,10),84000  ],
        [Date.UTC(2013, 11, 17), 78000],
            [Date.UTC(2013, 11, 24), 75000],
            [Date.UTC(2013, 12, 1), 64000],
            [Date.UTC(2013, 12, 8), 59000],
            [Date.UTC(2013, 12, 15), 50000],
            [Date.UTC(2013, 12, 22), 25000],
            [Date.UTC(2013, 12, 29), 0]

        ],
        dashStyle: 'longdash'
    }, {
        name: 'Gantt',
        type: 'columnrange',
        //inverted: true,
        xAxis: 1,
        yAxis: 1,
        data: [
            [Date.UTC(2013, 9, 29), Date.UTC(2013, 9, 30)],
            [Date.UTC(2013, 9, 30), Date.UTC(2013, 10, 17)],
            [Date.UTC(2013, 10, 18), Date.UTC(2013, 10, 30)],
            [Date.UTC(2013, 10, 30), Date.UTC(2013, 11, 17)]
        ],

    }]
});

我尝试从列范围图表开始并从那里构建它，但是这会导致样条值从最小到最大（即使使用反向选项）。这意味着将列范围添加到样条基础似乎是一个更好的主意。

我被卡住了似乎highcharts应该能够做到这一点。

如何在保持图形布局的其余部分的同时使列范围保持水平？

Answer 1

当您使用倒置选项时，不幸的是，轴被翻转并且所有系列都被反转。这是默认行为。你不能组合倒置和不倒置系列。

Highcharts spline和columnrange倒置

1 个答案: