Question

我正在使用Google API绘制图表集事件，每当我的按钮点击时，我的图表的一个值都会发生变化，但遗憾的是没有任何事情发生，所以是否有任何页面要更新Google而不重新加载页面？
谷歌图表链接
https://developers.google.com/chart/interactive/docs/gallery/timeline
Javascript代码：

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
       'version':'1','packages':['timeline']}]}"></script>
    <script type="text/javascript">
        var test=10;
        $(document).ready(function(){
            $("#test").click(function(){
                alert("Awd");
                test = 12;
            });
        });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var container = document.getElementById('example5.3');
            var chart = new google.visualization.Timeline(container);
            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn({ type: 'string', id: 'Room' });
            dataTable.addColumn({ type: 'string', id: 'Name' });
            dataTable.addColumn({ type: 'date', id: 'Start' });
            dataTable.addColumn({ type: 'date', id: 'End' });
            dataTable.addRows([
                [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,test,0,0),  new Date(0,0,0,14,0,0) ],
                [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
                [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
                [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
                [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
                [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
                [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
                [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
                [ 'Petunia Room',   'App Engine',          new Date(0,0,0,21,30,0), new Date(0,0,1,0,30,0) ]]);

            var options = {
                timeline: { colorByRowLabel: true },
                backgroundColor: '#ffd'
            };

            chart.draw(dataTable, options);
        }
    </script>

和Html：

<html>
<body>
<button id="test" class="btn btn-primary"></button>
    <div id="example5.3" style="width: 900px; height: 200px;"></div>
</body>
</html>

Answer 1

您需要让事件处理程序更改DataTable中的值，然后重绘图表：

function drawChart() {
    var container = document.getElementById('example5.3');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
        [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,10,0,0),  new Date(0,0,0,14,0,0) ],
        [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
        [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
        [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
        [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
        [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
        [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
        [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
        [ 'Petunia Room',   'App Engine',          new Date(0,0,0,21,30,0), new Date(0,0,1,0,30,0) ]]);

    var options = {
        timeline: { colorByRowLabel: true },
        backgroundColor: '#ffd'
    };

    $("#test").click(function(){
        alert("Awd");
        var date = dataTable.getValue(0, 2); // get "start" date in row 0
        date.setHours(12); // change the hour
        dataTable.setValue(0, 2, date); // set the "start" date of row 0
        chart.draw(dataTable, options); // redraw the chart
    });

    chart.draw(dataTable, options);
}

参见工作示例：http://jsfiddle.net/asgallant/xnKzJ/

如何使用活动更新Google图表？

1 个答案: