如何在谷歌折线图中获取滚动

时间:2018-09-29 08:04:49

标签: javascript html google-visualization

我正在使用具有10k大型数据点的google折线图。我想按x轴默认值滚动10,并在滚动时应显示其他值。我需要的就是这个http://jsfiddle.net/highcharts/644Du/29/ 我正在尝试获取这些,但我找不到这些的解决方案

这是html代码

 <div id="dashboard_div">
            <div id="chart_div"></div>
            <div id="range_filter_div"></div>
        </div>

这是JavaScript

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Value');

    // add 1 year of random data
    var val = 50;
    for (var i = 1; i < 366; i++) {
        val += Math.ceil(Math.random() * 5) * Math.pow(-1, Math.ceil(Math.random() * 2));
        data.addRow([new Date(2012, 0, i), val]);
    }
    /*
    var monthly = google.visualization.data.group(data, [{

    }], [{

    }]);
    var filter = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'range_filter_div',
        //dataTable: monthly,
        options: {
            filterColumnIndex: 0,
            ui: {
                chartOptions: {
                    height: 50,
                    width: 600,
                    chartArea: {
                        width: '70%'
                    }
                }
            }
        },
        state: {
            range: {
                start: new Date(2012, 0, 0),
                end: new Date(2012, 0, 31)
            }
        }
    });

    // create the chart
    var chart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'chart_div',
        options: {
            height: 300,
            width: 600,
            chartArea: {
                height: '80%',
                width: '70%'
            }
        }
    });

    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
    dashboard.bind([filter], [chart]);

    // snap range to nearest months
    google.visualization.events.addListener(filter, 'statechange', function (e) {
        if (!e.inProgress) {
            var state = filter.getState();
            console.log(state);
            // move start to beginning of starting month
            state.range.start = new Date(state.range.start.getFullYear(), state.range.start.getMonth(), 1);
            // move end to end of closing month
            state.range.end = new Date(state.range.end.getFullYear(), state.range.end.getMonth() + 1, 0);
            filter.setState(state);
            dashboard.draw(data);
        }
    });

    dashboard.draw(data);
}

google.load('visualization', '1', {packages:['controls']});
google.setOnLoadCallback(drawChart);

任何人都可以帮助我如何实现这一目标吗?

0 个答案:

没有答案