javascript — ошибка при загрузке нескольких диаграмм Google одновременно
Что мне нужно??
Мне нужно иметь две диаграммы Google. Один на каждой вкладке в Интернете, как показано на скриншоте ниже
Вкладки
Что происходит??
Второй график не загружается должным образом и показывает смешанную информацию. Вы можете проверить на скриншоте ниже:
Вторая вкладка
¿¿Что я уже сделал ??
Прежде чем спросить здесь, я попробовал некоторые другие ответы:
Несколько диаграмм Google не отображаются должным образом на одной странице
а также
Отображение нескольких диаграмм Google на одной странице
Но не работает должным образом.
Вот мой код:
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("43", { packages: ["corechart", "gauge", "table", "timeline", "bar"] });
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
dataTable = new google.visualization.DataTable();
var newData = <?php include ('tpl\include\test.php')?>
var numRows = newData.length;
var numCols = newData[0].length;
dataTable.addColumn('string', newData[0][0]);
for (var i = 1; i < numCols; i++)
dataTable.addColumn('number', newData[0][i]);
for (var i = 1; i < numRows; i++)
dataTable.addRow(newData[i]);
var options = {
width: 425,
height: 450,
chart: {
title: 'SLAs by Analist',
},
bars: 'horizontal'
}
;
var chart = new google.charts.Bar(document.getElementById('dual_1_div'));
chart.draw(dataTable, options);
//Second chart
dataTable2 = new google.visualization.DataTable();
var newData2 = <?php include ('tpl\include\test2.php')?>
var numRows2 = newData2.length;
var numCols2 = newData2[0].length;
dataTable2.addColumn('string', newData2[0][0]);
for (var ie = 1; ie < numCols2; ie++)
dataTable2.addColumn('number', newData2[0][ie]);
for (var ie = 1; ie < numRows2; ie++)
dataTable2.addRow(newData2[ie]);
var options2 = {
width: 425,
height: 450,
chart: {
title: 'By Analist',
},
bars: 'horizontal'
}
;
var chart2 = new google.charts.Bar(document.getElementById('dual_2_div'));
chart2.draw(dataTable2, options2);
}
</script>
</head>
И вот div для каждого графика:
<div id="dual_1_div" style="width: 300px; height: 450px;"></div>
<div id="dual_2_div" style="width: 300px; height: 450px;"></div>
Есть идеи, что не так?
Кроме того, я использую загрузчик, чтобы сделать вкладки:
<div role ="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role"presentation" class="active">
<a href="#tab1" aria-controls="tab1" data-toggle="tab" role="tab">In progress</a>
</li>
<li role"presentation">
<a href="#tab2" aria-controls="tab2" data-toggle="tab" role="tab">Completed</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1"> <!--My Queue TAB-->
<div class="container-fluid">
<div class="flow">
<div class="container col-xs-8">
<?php
include ('tpl\include\ocases.column1.tpl.php')
?>
</div>
<div class="container col-xs-4" > <!-- Grafico! -->
<nav class="bs-docs-sidebar affix">
<?php
include ('tpl\include\ocases.column2.tpl.php')
?>
</nav>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="tab2"> <!-- Completed TAB-->
<div class="container-fluid">
<div class="flow">
<div class="container col-xs-8">
<div class="table-responsive">
<?php
include ('tpl\include\ocases.completed.columna1.tpl.php')
?>
</div>
</div>
<div class="container col-xs-4" > <!-- Grafico! -->
<nav class="bs-docs-sidebar affix">
<?php
include ('tpl\include\ocases.completed.columna2.tpl.php')
?>
</nav>
</div>
</div>
</div>
</div>
</div>
Решение
нужно подождать, пока не появится вкладка,
перед тем как нарисовать график в первый раз …
нарисуйте график, который показан по умолчанию,
тогда когда показанная вкладка срабатывает …
// draw default chart
chart.draw(dataTable, options);
// draw chart when tab is shown
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
switch ($(e.target).html()) {
case 'In progress':
chart.draw(dataTable, options);
break;
case 'Completed':
chart2.draw(dataTable2, options2);
break;
}
});
смотрите следующий полный фрагмент …
google.charts.load("43", { packages: ["corechart", "gauge", "table", "timeline", "bar"] });
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
dataTable = new google.visualization.DataTable();
var newData = <?php include ('tpl\include\test.php')?>
var numRows = newData.length;
var numCols = newData[0].length;
dataTable.addColumn('string', newData[0][0]);
for (var i = 1; i < numCols; i++)
dataTable.addColumn('number', newData[0][i]);
for (var i = 1; i < numRows; i++)
dataTable.addRow(newData[i]);
var options = {
width: 425,
height: 450,
chart: {
title: 'SLAs by Analist',
},
bars: 'horizontal'
};
var chart = new google.charts.Bar(document.getElementById('dual_1_div'));
//Second chart
dataTable2 = new google.visualization.DataTable();
var newData2 = <?php include ('tpl\include\test2.php')?>
var numRows2 = newData2.length;
var numCols2 = newData2[0].length;
dataTable2.addColumn('string', newData2[0][0]);
for (var ie = 1; ie < numCols2; ie++)
dataTable2.addColumn('number', newData2[0][ie]);
for (var ie = 1; ie < numRows2; ie++)
dataTable2.addRow(newData2[ie]);
var options2 = {
width: 425,
height: 450,
chart: {
title: 'By Analist',
},
bars: 'horizontal'
};
var chart2 = new google.charts.Bar(document.getElementById('dual_2_div'));
// draw default chart
chart.draw(dataTable, options);
// draw chart when tab is shown
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
switch ($(e.target).html()) {
case 'In progress':
chart.draw(dataTable, options);
break;
case 'Completed':
chart2.draw(dataTable2, options2);
break;
}
});
}
Другие решения
Других решений пока нет …