使用Google Charts滚动LineChart动画 [英] Scrolling LineChart animation with Google Charts

问题描述

我正在尝试使用Google图表中的折线图创建滚动动画.我想显示来自外部数据源的实时数据，因此无法预先填充我的数据表，并且它不能是特定大小.

I'm trying to create a scrolling animation with a Line Chart in Google Charts. I want to display real time data from an external data source, so my data table cannot be populated in advance and it can not be a specific size.

我的一般想法是使用滚动窗口(请参见此处的最后一个示例: https ://developers.google.com/chart/interactive/docs/animation#Examples )，然后向前移动窗口，同时删除窗口后面的数据，并在窗口前面添加数据.

My general idea was to use a scrolling window (see last example here: https://developers.google.com/chart/interactive/docs/animation#Examples) and just move the window forward while removing data behind the window and add data in front of the window.

到目前为止，我的进度看起来像这样: http://jsfiddle.net/svantetobias/knt7F/

So far my progress looks like this: http://jsfiddle.net/svantetobias/knt7F/

HTML:

<div id="google_chart_div" width="750" height="400"></div>
<input id="next" type="button" value="Next reading">

JavaScript:

JavaScript:

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {
    'packages': ['corechart']
});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(loadChart);

function loadChart() {
    // Set chart options
    var options = {
        width: 1000,
        height: 400,
        vAxis: {
            minValue: 0,
            maxValue: 100
        },
        hAxis: {
            viewWindow: {
                min: 1,
                max: 5
            }
        },
        curveType: 'none', // or 'function'
        pointSize: 5,
        series: {
            0: {
                color: 'Blue'
            },
            1: {
                color: 'Orange'
            }
        },
        animation: {
            duration: 1000,
            easing: 'linear'
        }
    };

    // Create the data table.
    var data = google.visualization.arrayToDataTable([
        ['Time', 'series1', 'series2'],
        ['2014 23/07 13:00', 700, 900],
        ['2014 23/07 14:00', 850, 900],
        ['2014 23/07 15:00', 1000, 900],
        ['2014 23/07 16:00', 1050, 900],
        ['2014 23/07 17:00', 700, 900],
        ['2014 23/07 18:00', 650, 900],
        ['2014 23/07 19:00', 700, 900],
        ['2014 23/07 20:00', 950, 900]
    ]);

    // Instantiate our chart
    var chart = new google.visualization.LineChart(document.getElementById('google_chart_div'));

    // Define button
    var button = document.getElementById('next');

    function drawChart() {
        // Disabling the button while the chart is drawing.
        button.disabled = true;
        google.visualization.events.addListener(chart, 'ready', function () {
            button.disabled = false;
        });
        // Draw chart
        chart.draw(data, options);
    }

    button.onclick = function () {
        //data.removeRow(0);
        data.insertRows(data.getNumberOfRows(), [
            ['2014 23/07 20:00', Math.floor((Math.random() * (1400 - 600)) + 600), 900]
        ]);
        options.hAxis.viewWindow.min += 1;
        options.hAxis.viewWindow.max += 1;
        drawChart();


    };
    drawChart();
}

对于前几个动画，它看起来像我想要的，但是随后这行开始产生怪异的波浪.如何使其像滚动窗口一样正确地设置动画?

For the first few animations it looks like I want it, but then the line starts doing weird waves. How do I make it animate properly like a scrolling window?

推荐答案

您的问题是您要一遍又一遍地添加相同的日期，这使图表很难插值结果.尝试 http://jsfiddle.net/KaU3y/，或者:

Your problem is that you're adding the same date over and over again, and it's causing the chart to have a hard time interpolating the result. Try http://jsfiddle.net/KaU3y/, or:

data.insertRows(data.getNumberOfRows(), [
        ['' + new Date(), Math.floor((Math.random() * (1400 - 600)) + 600), 900]
    ]);

这篇关于使用Google Charts滚动LineChart动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！