使用 Google Charts 滚动 LineChart 动画

Question

我正在尝试使用 Google 图表中的折线图创建滚动动画。我想显示来自外部数据源的实时数据，所以我的数据表不能预先填充，也不能是特定的大小。

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

到目前为止，我的进度是这样的：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：

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

对于前几个动画，它看起来像是我想要的，但随后线条开始出现奇怪的波浪。如何让它像滚动窗口一样正确动画？

Answer 1

您的问题是您一遍又一遍地添加相同的日期，这导致图表很难插入结果。试试http://jsfiddle.net/KaU3y/，或者：

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