使用 javascript / jqplot 可视化以小间隔变化的时间序列数据答案

【问题标题】：visualize timeseries data that changes in small intervals with javascript / jqplot使用 javascript / jqplot 可视化以小间隔变化的时间序列数据
【发布时间】：2013-05-31 19:46:44
【问题描述】：

我尝试使用带有 javascript (testData) 的浏览器中的简单折线图来可视化一些数据，这些数据以非常短的间隔从一秒到一秒发生变化。

我已经用 jqplot 试过了，见上面的代码。问题是对于 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
    }
});

});

【问题讨论】：

请使用您的代码在jsfiddle.net 创建一个演示
Fiddle 现已上线！

标签： javascript jquery jqplot

【解决方案1】：

请加载渲染轴所需的所有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

您可以修改此函数，使其返回第一个时间戳和最后一个时间戳之间等距点的数组。

【讨论】：

嗨，不错的尝试！但是当我添加更多数据时，问题仍然存在，请参见此处：jsbin.com/onufih/9
有时不工作，因为 js 文件没有被加载.. 否则它对我有用......
是的，但是缩放功能不起作用……但你明白了；）

【解决方案2】：

您也可以使用Pondjs 或Momentjs 来执行此操作，它还具有缩放功能，并且更清洁，但可能有点乏味。它根据如何使用 react-timeseries-charts 创建基于图表实现图表的代码来处理这些点并自动绘制它们。它们都可以很好地与池塘或时刻一起使用。

【讨论】：