谷歌图表和谷歌表格不能同时显示
Google charts and google table not displaying simultaneously
我正在为我的项目使用谷歌图表和谷歌表格。问题是,我无法在单个页面上显示两个谷歌图表和一个谷歌表格。如何解决这个问题?
我的代码:
<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>
链接到谷歌图表:https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart#column-styles
您已经定义了 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
相关文章:
- 不显示带有本地json文件数据的谷歌地图脚本
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 谷歌地图标记不会显示
- 无法在JS中显示谷歌地图
- 需要帮助谷歌地图方向面板在FancyBox中显示
- 使用谷歌应用程序脚本从工作表中获取值并将其显示在文本框中
- 谷歌地图JS API+JSON-多个标记没有显示
- 如何在谷歌字体加载时显示加载图像
- 谷歌水印未显示在自定义搜索框中
- 谷歌地图v3标记没有显示ie8和9
- 标记不会显示在谷歌地图上
- 谷歌地图停止显示点v3
- 谷歌图表显示所有标签
- PHP谷歌地图-位置红色气球没有显示
- SIMPLE Javascript代码,用于显示谷歌电子表格中单个字段的数据
- 谷歌地图地点API地图未显示
- 当我使用高度百分比时,谷歌地图javascript api不会显示
- 谷歌图表在运行应用程序时只能显示一次
- 使用JSON在谷歌地图上显示标记
- 使用谷歌地图API和phonegap显示当前位置+方向