highcharts:epoch时间没有正确连接到Xaxis

时间:2013-02-11 18:07:34

标签: javascript highcharts

当我有不一致的数据进入时(例如收集数据的服务器关闭时),highcharts不能正确绘制X.
它仍然像X上的数据一样,而没有 当有实际数据时,它应该包括正确的小时 这是小提琴:http://jsfiddle.net/ZVwFK/
数据变量不一致!

有人可以告诉我如何更正此错误吗?

$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'spline',
            margin: [50,130,90,100]
        },
        title: {
            text: 'Weather Today'
        },
        credits: {
            enabled: false
        },
        subtitle: {
            text: 'test'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                day: '%H:%M'
            },
            tickInterval: 3600 * 1000,
            labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '10px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: [{
            title: {
                text: 'Temperature C'
            },
            opposite: false,
            minorGridLineWidth: 0
            }, {
            title: {
                text: 'Humidity %'
            },
            minorGridLineWidth: 0,
            opposite: true
            }, {
            opposite: true,
            title: {
                text: 'Air Pressure hPa',
                minorGridLineWidth: 0,
            },
        }],
        tooltip: {
            formatter: function() {
                    if(this.series.name === 'Temperature')
                    {
                        return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' C';
                    }
                    if(this.series.name === 'Humidity')
                    {
                        return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' %';
                    }
                    if(this.series.name === 'Air Pressure')
                    {
                        return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' hPa';
                    }
            }
        }, 
        plotOptions: {
            spline: {
                lineWidth: 4,
                states: {
                    hover: {
                        lineWidth: 3
                    }
                },
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: true,
                            symbol: 'circle',
                            radius: 3,
                            lineWidth: 1
                        }
                    }
                }
            }
        }, 
        series: [{
                name: 'Temperature',
                data: temp,
                type: 'spline',
                /* yAxis: 0, */
                shadow: true,
                showInLegend: true, 
                pointInterval: 60 * 1000, 
                /* pointStart: Date.UTC(2006, 0, 1),*/
                dashStyle: 'solid',  
                marker: {
                    enabled: false
                } 
                } , {
                name: 'Humidity',
                data: hum,
                yAxis: 1,
                shadow: false,
                showInLegend: true,
                pointInterval: 60 * 1000,
                type: 'line',
                dashStyle: 'dot',  
                marker: {
                    enabled: false
                } 
                }, {
                name: 'Air Pressure',
                data: bar,
                yAxis: 2,
                shadow: false,
                showInLegend: true,
                pointInterval: 60 * 1000,
                type: 'line',
                dashStyle: 'shortdot',  
                marker: {
                    enabled: false
                } 
        }],
        navigation: {
            menuItemStyle: {
                fontSize: '6px'
            }
        } 
    });
});

});

1 个答案:

答案 0 :(得分:0)

有两种方法可以为Highcharts指定时间数据,我认为你使用错误的方法解决问题。这是数据中存在空白时应该使用的第二种样式。

  1. 没有间隙的紧凑数组只包含每个时间点的值

    data: [2, 5, 3, 6, 1]
    

    然后指定第一个度量的时间点和间隔。例如:

    pointStart: Date.UTC(2013,1,12), // start point in milliseconds
    pointInterval: 3600 // interval in milliseconds
    

    这样的时间点之间不能有不同的长度。

  2. 包含时间点和度量的二维数组

    data: [[Date.UTC(2013,1,12), 2],
           [Date.UTC(2013,1,12), 5],
           [Date.UTC(2013,1,12), 3],
          ...]
    

    这种指定数组的方式可能存在没有数据的空白。

  3. 参见参考资料here 和示例here