Question

在我的项目中，我有3个按钮，在每个按钮点击事件上，我调用不同的谷歌图表功能......

我的问题是，当我点击一个按钮时，图表会加载，但是当我点击第二个按钮或任何按钮时图表不会更新我从json传递数据

function daily() {
        google.charts.load('current', { packages: ['corechart', 'line'] });
        google.charts.setOnLoadCallback(drawBasic);
        function drawBasic() {

            var data = new google.visualization.DataTable();
            data.addColumn('date', 'X');
            data.addColumn('number', 'Score');
             
            for (var i = 0; i < dscr.length; i++) {
                //alert(dscr.length);
                //alert(dscr[i].Success);
                //alert(dscr[i].Date); var dt = mscr[i].Date;
                //var dt = dscr[i].Date;
                //var d = new Date(dt);
                //var n = d.getDate();
                //alert(n);
                data.addRow([new Date(dscr[i].Date), dscr[i].Success]);
            } 

            var options = {
                hAxis: {
                    title: 'Day'
                },
                vAxis: {
                    title: 'Score'
                }
            };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

            chart.draw(data, options);
        }
    }

    function weekly() {
        google.charts.load('current', { packages: ['corechart', 'line'] });
        google.charts.setOnLoadCallback(drawBasic);
        function drawBasic() {

            var data = new google.visualization.DataTable();
            data.addColumn('date', 'X');
            data.addColumn('number', 'Score'); 
            for (var i = 0; i < wscr.length; i++) {
                
                data.addRow([new Date(wscr[i].Date), wscr[i].Success]);
            } 
            var options = {
                hAxis: {
                    title: 'Day'
                },
                vAxis: {
                    title: 'Score'
                }
            };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

            chart.draw(data, options);
        }
    }

    function monthly() {
        google.charts.load('current', { packages: ['corechart', 'line'] });
        google.charts.setOnLoadCallback(drawBasic);
        function drawBasic() {

            var data = new google.visualization.DataTable();
            data.addColumn('date', 'X');
            data.addColumn('number', 'Score');  

            for (var i = 0; i < mscr.length; i++) {
                
                scr[i].Date), mscr[i].Success]);
            } 

            var options = {
                hAxis: {
                    title: 'Day', 
                },
                vAxis: {
                    title: 'Score'
                }
            };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

            chart.draw(data, options);
        }
    }

 <li role="presentation" class="active">
    <a href="#Daily" aria-controls="home" class="btn btn-md WinnerButton" role="tab" onclick="daily()" data-toggle="tab" data-bind="    click: StatisticalDaily">
        DAILY
    </a>
</li>
<li role="presentation">
    <a href="#Weekly" aria-controls="profile" class="btn btn-md WinnerButton" role="tab" onclick="weekly()" data-toggle="tab" data-bind="    click: StatisticalWeekly">
        WEEKLY
    </a>
</li>
<li role="presentation">
    <a href="#Monthly" aria-controls="messages" class="btn btn-md WinnerButton" role="tab" data-toggle="tab" onclick="monthly()" data-bind="click: StatisticalMonthly">
        MONTHLY
    </a>

</li>

<div id="chart_div"></div>

Answer 1

您的问题是，您正在尝试多次拨打google.charts.load()，这是不允许的。此外，您不应在drawBasic()，daily()和weekly()中定义monthly()三次。

这是一个有效的jsfiddle。这可能是实现您所需要的良好开端。

我想在每个按钮点击事件上加载多个图表。我使用了下面的谷歌代码

1 个答案: