用javascript / jqplot将小间隔中变化的timeseries数据可视化。

I try to visualize some data, that changes in very short intervals from second to second, with a simple line chart in a browser with javascript (testData).

我试着将一些数据可视化，这些数据在非常短的时间间隔内发生变化，在浏览器中使用javascript (testData)进行简单的行图。

I have tried it with jqplot, see code above. The problem is that it seems that the interval between the times is too small for jqplot...the browser crashes every time when i try to create the graph.

我已经尝试了jqplot，参见上面的代码。问题是，对于jqplot来说，时间间隔似乎太小了……每次我尝试创建图形时，浏览器都会崩溃。

Any ideas? A nice zoom function like this would also be nice:

什么好主意吗?像这样的缩放功能也很好:

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

1.) Is there a way to do this with jqplot? What do i wrong?

1)。有没有办法用jqplot来做这个?我错了吗?

Update: See better fiddle here: http://jsbin.com/onufih/9/

更新:请参阅这里:http://jsbin.com/onufih/9/。

html:

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

Here's my js-code:

这是我的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
    }
});

});

1 个解决方案

#1

Please load all the required js files for rendering axis

请将所有需要的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>

EDIT :

编辑:

There is some exception or infinite loop is coming in the automatic calculation of ticks for the chart. What you can do is write a function to calculate the tick points and give it for ticks property in axis options. An example function is given below which will select all the points in the data as tick points.

有一些例外或无限循环在自动计算图表的滴答声。你所能做的就是写一个函数来计算出刻度点，并在轴的选项中给出滴答的属性。下面给出了一个示例函数，它将选择数据中的所有点作为点。

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
    }
}
...

demo: http://jsbin.com/onufih/6/edit

演示:http://jsbin.com/onufih/6/edit

You can modify this function in such a way that it will return an array of equidistant points between first time stamp and the last.

您可以以这样的方式修改这个函数，它将在第一个时间戳和最后一个标记之间返回一个等距点的数组。

#1