Я хочу загрузить несколько диаграмм На каждом событии нажатия кнопки.Я использовал ниже код google

В моем проекте у меня есть 3 кнопки, и на каждой кнопке нажмите событие, которое я вызываю другую функцию Google chart ……

Мой вопрос в том, когда я нажимаю на одну кнопку диаграмма загружается, но когда я нажимаю вторую или любую кнопку, диаграмма не обновляется
Я передаю данные от 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>

1 ответ

  1. Ваша проблема заключается в том, что вы пытаетесь позвонить йо google.charts.load()более одного раза, который не разрешен. Кроме того, не следует определять drawBasic()значение three times indaily(),weekly(), and monthly().

    Вот рабочий jsfiddle . Это может быть хорошим началом для достижения того, что вам нужно.