2

我尝试使用带有 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
    }
});

});
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 回答
0

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

于 2020-03-02T15:35:00.683 回答