3

x 軸が日付、y 軸が整数の 2 つの系列を含む単純な折れ線グラフがあります。これを示すコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" language="javascript" src="flot/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="flot/jquery.flot.js"></script>
    <style type="text/css">
        #overview-plot24 {
            width: 94%;
            margin-left: 20px;
            height: 220px;
        }
    </style>

    <script type="text/javascript">
        $(function() {
            var plotOptions = {
                //Options go here
                xaxis: {
                    mode: "time",
                    tickLength: 5,
                    reserveSpace: true,
                    autoscaleMargin: 0.01
                },
                yaxis: {
                    min: 0
                },
                legend: {
                    show: false
                },
                series: {
                    lineWidth: 1,
                    shadowSize: 0
                },
                grid: {
                    hoverable: true,
                    clickable: true
                }
            };

            var plot2 = $.plot(
                    '#overview-plot24', [
                        {
                            label: "Alerts",
                            color: "#FC8200",
                            data: [
                                    [Date.parse("2013-03-19 15:00"), 9650],
                                    [Date.parse("2013-03-19 16:00"), 33124],                                
                                    [Date.parse("2013-03-19 17:00"), 27806],
                                    [Date.parse("2013-03-19 18:00"), 24143],
                                    [Date.parse("2013-03-19 19:00"), 7573],
                            ]},
                        {
                            label: "Scores",
                            color: "#8000FF",
                            data: [                            
                                    [Date.parse("2013-03-19 15:00"), 26407],
                                    [Date.parse("2013-03-19 16:00"), 93973],
                                    [Date.parse("2013-03-19 17:00"), 77760],                                
                                    [Date.parse("2013-03-19 18:00"), 68715],
                                    [Date.parse("2013-03-19 19:00"), 20383],
                            ]
                        }
                    ],
                    plotOptions
            );
        });
    </script>
</head>

<body>
    <div id="overview-plot24"></div>
</body>
</html>

これは Chrome と Opera では正しく表示されますが、このシリーズは Safari と Firefox では表示されません。 正しいレンダリングChrome のレンダリングは正しく行われます。 悪いレンダリングSafari と Firefox では正しく表示されません。

flot Web ページの例はすべてのブラウザーで正しくレンダリングされるため、これは困惑しており、自分のコードがどこで異なるかを確認するのに苦労しています!

コードを直接実行することに関心がある場合は、必要なものがすべて含まれている zip アーカイブを利用できます。

4

3 に答える 3

5

問題はFlotやそのレンダリングではなく、JavaScript、特に日付に使用する形式にあります。

日付に使用している形式は無効です（レンダリングされたグラフの横軸を参照）。その形式2013-03-19 19:00はIEとChromeで認識されますが、FFとSafariでは認識されないためです。

すべてのブラウザが確実に読み取ることができる唯一の形式はYYYY-MM-DDTHH:mm:ss.sssZ、コード内の文字列をに変更する必要がある場合です2013-03-19T19:00。その他の詳細（または日付に関するこの小さなチュートリアル）については、これとSOに関するこの投稿を参照してください。

于 2013-03-20T12:58:23.913 に答える
3

これは、Safari と Firefox で Date.parse 関数が期待どおりに機能しないという問題でしょうか? 認識される日付形式は実装に依存しており、異なるブラウザー間で一貫していない可能性があると思います。

詳細については、この質問を参照してください

于 2013-03-20T12:59:20.560 に答える