0

当我有不一致的数据进入时（例如，当收集数据的服务器关闭时）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'
            }
        } 
    });
});

});

4

1 回答 1

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],
      ...]

    这种指定数组的方式可能会在没有数据的地方出现间隙。

请参阅此处的参考和此处的 示例。

于 2013-02-12T10:02:07.730 回答