2

javascript (testData) を使用してブラウザーで単純な折れ線グラフを使用して、秒単位で非常に短い間隔で変化するデータを視覚化しようとしています。

上記のコードを参照してください。問題は、時刻間の間隔が jqplot に対して小さすぎるように見えることです...グラフを作成しようとすると、毎回ブラウザがクラッシュします。

何か案は？このような素敵なズーム機能もいいでしょう:

http://www.jqplot.com/deploy/dist/examples/rotatedTickLabelsZoom.html

1.) jqplot でこれを行う方法はありますか? 私は何を間違っていますか？

更新: ここでより良いフィドルを参照してください: http://jsbin.com/onufih/9/

html:

        <div id="overviewChart"></div>

ここに私のjsコードがあります:

$(document).ready(function() {

// testData that works fine:

var testData = [['2008-10-29 10:00:00', 0], ['2008-10-30 10:00:10', 1]]; 

// testData that works not fine, time intervals are too small: 

var testData = [['2008-10-29 10:00:00', 0], ['2008-10-29 10:00:10', 1],
                ['2008-10-29 10:00:11', 0], ['2008-10-29 10:00:14', 1]];

var overviewChart = $.jqplot('overviewChart', [testData], {
    title : 'Rotated Axis Text',
    axes : {
        xaxis : {
            renderer : $.jqplot.DateAxisRenderer,
            rendererOptions : {
                tickRenderer : $.jqplot.CanvasAxisTickRenderer
            },
            tickOptions : {

                formatString : '%#m/%#d/%y - %#H h - %#M m - %#S s',
                fontSize : '10pt',
                fontFamily : 'Tahoma',
                angle : -40
            }
        },
        yaxis : {
            rendererOptions : {
                tickRenderer : $.jqplot.CanvasAxisTickRenderer
            },
            tickOptions : {
                fontSize : '10pt',
                fontFamily : 'Tahoma',
                angle : 30
            }
        }
    },
    series : [{
        lineWidth : 4,
        markerOptions : {
            style : 'square'
        }
    }],
    cursor : {
        zoom : true,
        looseZoom : true
    }
});

});
4

2 に答える 2

3

軸のレンダリングに必要なすべての js ファイルをロードしてください

<script language="javascript" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="../plugins/jqplot.canvasAxisTickRenderer.min.js"></script>

編集 ：

チャートのティックの自動計算で何らかの例外または無限ループが発生しています。あなたができることは、目盛りを計算する関数を書き、それをticks軸オプションのプロパティに与えることです。データ内のすべてのポイントを目盛りとして選択する関数の例を以下に示します。

function getTicks() {

    var ticks = [];

    for (var i = 0; i < data.length; i++) {
        var item = data[i];
        var dateStr = item[0];
        ticks.push(dateStr);
    }

    return ticks;
}

...

xaxis: {
    renderer: $.jqplot.DateAxisRenderer,
    rendererOptions: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer
    },
    ticks: getTicks(), // use the function to get the array of tick points
    tickOptions: {

        formatString: '%#m/%#d/%y - %#H h - %#M m - %#S s',
        fontSize: '10pt',
        fontFamily: 'Tahoma',
        angle: -40
    }
}
...

デモ: http://jsbin.com/onufih/6/edit

この関数を変更して、最初のタイム スタンプと最後のタイム スタンプの間の等距離点の配列を返すようにすることができます。

于 2013-06-01T09:01:00.157 に答える