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

ハイチャートの時間データを指定する方法は 2 つありますが、問題に対して間違った方法を使用していると思います。これは、データにギャップがある場合に使用する必要がある 2 番目のスタイルです。

  1. 各時点の値のみを含む、ギャップのないコンパクトな配列

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

    次に、間隔とともに最初のメジャーの時点を指定します。例えば：

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

    このように、時点間の長さを変えることはできません。

  2. 時点とメジャーの両方を含む 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 に答える