jqPlot:如何实时更新图表

本文介绍了jqPlot:如何实时更新图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我无法弄清楚自己，也无法找到适当的示例来说明如何以这种高图所示的类似方式在jqPlot中执行实时更新示例.

I'm unable to figure out myself or find a proper example on how to perform live updates in jqPlot in a similar way as shown in this highcharts example.

推荐答案

基于此，我准备了以下示例:

Based on this, I prepared the following example:

$(document).ready(function() { var plot1 = $.jqplot('chart1', [new Array(1)], { title: 'Live Random Data', series: [ { yaxis: 'y2axis', label: '', showMarker: false, fill: false, neighborThreshold: 3, lineWidth: 2.2, color: '#0571B6', fillAndStroke: true} ], axes: { xaxis: { renderer: $.jqplot.DateAxisRenderer, tickOptions: { formatString: '%H:%M:%S' }, numberTicks: 10 }, y2axis: { min: 100, max: 150, tickOptions: { formatString: '%.2f' }, numberTicks: 15 } }, cursor: { zoom: false, showTooltip: false, show: false }, highlighter: { useAxesFormatters: false, showMarker: false, show: false }, grid: { gridLineColor: '#333333', background: 'transparent', borderWidth: 3 } }); var myData = []; var x = (new Date()).getTime() - 101000; var y; var i; for ( i = 0; i < 100; i++) { x += 1000; y = Math.floor(Math.random() * 100); myData.push([x, y]); } plot1.series[0].data = myData; plot1.resetAxesScale(); plot1.axes.xaxis.numberTicks = 10; plot1.axes.y2axis.numberTicks = 15; plot1.replot(); function updateSeries() { myData.splice(0, 1); x = (new Date()).getTime(); y = Math.floor(Math.random() * 100); myData.push([x, y]); plot1.series[0].data = myData; plot1.resetAxesScale(); plot1.axes.xaxis.numberTicks = 10; plot1.axes.y2axis.numberTicks = 15; plot1.replot(); } window.setInterval(updateSeries, 1000); });

请参阅此jsfiddle进行测试.