jqPlot: how to live update a chart

后端 未结 3 1489
鱼传尺愫
鱼传尺愫 2021-02-13 11:59

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.

3条回答
  •  太阳男子
    2021-02-13 12:40

    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);
    });
    

    See this jsfiddle to test it out.

提交回复
热议问题