简体   繁体   中英

Highcharts, stacked column range with date in y-axis

The highcharts is rendering the chart when the series data is hardcoded and when the data is passed through a variable from backend, it doesn't generate a chart.

series: [{
                name: 'T1',
                stack: 'Tasks',
                color: 'blue',
                data: [ { x: 0,
                       low: Date.UTC(2015, 2, 13, 11, 42, 02),
                       high: Date.UTC(2015, 2, 13, 14, 15, 53)},
                     { x: 1,
                       low: Date.UTC(2015, 2, 13, 11, 42, 02),
                       high: Date.UTC(2015, 2, 13, 11, 42, 02)},
                     { x: 2,
                       low: Date.UTC(2015, 2, 13, 11, 42, 02),
                       high: Date.UTC(2015, 2, 13, 15, 54, 23)},
                     { x: 3,
                       low: Date.UTC(2015, 2, 13, 11, 42, 02),
                       high: Date.UTC(2015, 2, 13, 14, 17, 08)},
                     { x: 4,
                       low: Date.UTC(2015, 2, 13, 11, 42, 02),
                       high: Date.UTC(2015, 2, 13, 17, 23, 13)} ]
            }, {
                name: 'T2',
                stack: 'Tasks',
                color: 'green',
                data: [ { x: 0,
                   low: Date.UTC(2015, 2, 13, 14, 15, 53),
                   high: Date.UTC(2015, 2, 13, 14, 17, 08)},
                 { x: 1,
                   low: Date.UTC(2015, 2, 13, 11, 42, 02),
                   high: Date.UTC(2015, 2, 13, 13, 23, 02)},
                 { x: 3,
                   low: Date.UTC(2015, 2, 13, 14, 17, 08),
                   high: Date.UTC(2015, 2, 13, 14, 24, 55)} ]
            }, {
                name: 'T3',
                stack: 'Tasks',
                color: 'red',
                data: []
            }]

When the value is coming from backend, the code is

series: [{
                name: 'T1',
                stack: 'Tasks',
                color: 'blue',
                data: (function(){
                    var data = [];
                    var temp = {};
                    for(i in msg.T1){
                        temp.x = msg.T1[i].x;
                        // temp.low = new Date(msg.T1[i].low) or Date.UTC(new Date(msg.T1[i].low);
                        // temp.high = new Date(msg.T1[i].high);
                        temp.low = parseInt(i);
                        temp.high = parseInt(i)+2;
                        data.push(temp);
                    }
                    return data;
                }())
            }, {
                name: 'T2',
                stack: 'Tasks',
                color: 'green',
                data: (function(){
                    var data = [];
                    var temp = {};
                    for(i in msg.T2){
                        temp.x = msg.T2[i].x;
                        // temp.low = new Date(msg.T2[i].low);
                        // temp.high = new Date(msg.T2[i].high);
                          temp.low = parseInt(i);
                        temp.high = parseInt(i)+2;
                        data.push(temp);
                    }
                    return data;
                }())
            }, {
                name: 'T3',
                stack: 'Tasks',
                color: 'red',
                data: (function(){
                    var data = [];
                    var temp = {};
                    for(i in msg.T3){
                        temp.x = msg.T3[i].x;
                        // temp.low = new Date(msg.T3[i].low);
                        // temp.high = new Date(msg.T3[i].high);
                          temp.low = parseInt(i);
                        temp.high = parseInt(i)+2;
                        data.push(temp);
                    }
                    return data;
                }())
            }]
        });

The second code, despite throwing no error, does not render the chart. What is wrong in the data format

The problem is fixed, issue was that the value of x in temp.x, the data object passed to series, should be integer only, no Strings or any other data types are allowed. Fixing that fixed the chart

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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