JavaScript — диаграммы Google и таблица Google не отображаются одновременно

Question

JavaScript — диаграммы Google и таблица Google не отображаются одновременно

Я использую диаграммы Google и таблицу Google для своего проекта. Проблема в том, что я не могу отобразить две диаграммы Google и одну таблицу Google на одной странице. Как это можно решить?

Мой код:

    <script type="text/javascript">

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages': ['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

function drawChart() {

// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?= $jsonTable ?>);
var options = {
title: ' Audit Schedule ',
is3D: 'true',
width: 500,
height: 250};
// Instantiate and draw our chart, passing in some options.
// Do not forget to check your div ID
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);

}
</script><script type="text/javascript">
google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {

var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);

var options = {
title: 'My Daily Activities',
width: 501.2,
height: 250
};

var chart = new google.visualization.PieChart(document.getElementById('piechart'));

chart.draw(data, options);
}

</script><script type="text/javascript">
google.charts.load('current', {'packages': ['table']});
google.charts.setOnLoadCallback(drawTable);

function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v: 8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);

var table = new google.visualization.Table(document.getElementById('table_div'));

table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}
</script>

// HTML-код

                                    <div id="piechart" style="margin-top: -300px; margin-left:490px;"></div><br>

<div class="chart-wrapper">
<div id="chart" style="width:1006px; height:400px; margin-left: -15px"></div>
</div><br>

<div id="table_div"></div>

Ссылка на Google Chart: https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart#column-styles

1

google-chartwrapper javascript jquery php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вы определили несколько экземпляров google.charts.setOnLoadCallback (). Эта функция должна быть определена только ОДИН РАЗ в вашем коде, потому что в противном случае вы будете перезаписывать событие обратного вызова каждый раз. В любом случае, вы должны обернуть все функции рисования диаграмм в что-то вроде:

  function drawCharts(){
drawchart1();
drawchart2();
drawwhateveryouwant();
}

google.setOnLoadCallback(drawCharts);

Кроме того, я мог бы указать, что у вас есть две функции с одним и тем же именем ^^, вы можете исправить это. Кроме этого, вы можете вызвать все пакеты диаграмм одновременно, поскольку я также заметил, что вы загружали один и тот же пакет дважды, что является пустой тратой ресурсов, даже если это не мешает правильному функционированию вашего кода:

 google.load('visualization', '1', {'packages': ['corechart','table']});

Я немного изменил ваш код, чтобы помочь вам достичь желаемых результатов:

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

</head>
<body>
<div id="piechart"></div>
<div id="table_div"></div>
</body>
<script>

google.charts.setOnLoadCallback(init);
google.charts.load('current', {'packages':['corechart','table']});

//Function to draw piechart
function drawChart() {

var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);

var options = {
title: 'My Daily Activities',
width: 501.2,
height: 250
};

var chart = new google.visualization.PieChart(document.getElementById('piechart'));

chart.draw(data, options);
};

//Function to draw table
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v: 8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);

var table = new google.visualization.Table(document.getElementById('table_div'));

table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}

//Function to initialize everything
function init(){

drawTable();
drawChart();

}

</script>
</html>

Вы простите меня за пропуск диаграммы с данными JSON, хотя: p

1