繁体   English   中英

Highcharts样条和列范围倒置

[英]Highcharts spline and columnrange inverted

我有既有样条曲线又有columnrange的图表,理想情况下,该图表将被反转,因此条形图水平运行,并且xAxis值位于y轴上。

请参阅jsfiddle中的当前代码

相关代码部分:

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

    }]
});

我尝试从列范围图开始并从那里开始构建它,但是这导致样条曲线值从最小到最大(即使使用反向选项)也是如此。 这意味着将columnrange添加到样条库似乎是一个更好的主意。

我被卡住了,看来highcharts应该能够做到这一点。

在保持其余图表布局的同时,如何使列范围保持水平?

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM