谷歌图表仪表板加载失败
Posted
技术标签:
【中文标题】谷歌图表仪表板加载失败【英文标题】：google charts dashboard load fail 【发布时间】：2016-11-04 18:38:37 【问题描述】：这个问题可能是最愚蠢的，但我试图让代码运行直接来自谷歌图表指南网站，但令人惊讶的是它不起作用。
我已从以下 URL 复制粘贴代码并尝试在 Firefox 浏览器中运行它。它给了我以下错误，我在日志中也找不到任何错误。不知道出了什么问题。 代码来源：https://developers.google.com/chart/interactive/docs/gallery/controls#using-controls--and-dashboards
代码
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.charts.load('current', 'packages':['controls']);
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard()
// Create our data table.
var data = google.visualization.arrayToDataTable([
['Name', 'Donuts eaten'],
['Michael' , 5],
['Elisa', 7],
['Robert', 3],
['John', 2],
['Jessica', 6],
['Aaron', 1],
['Margareth', 8]
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var donutRangeSlider = new google.visualization.ControlWrapper(
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options':
'filterColumnLabel': 'Donuts eaten'
);
// Create a pie chart, passing some options
var pieChart = new google.visualization.ChartWrapper(
'chartType': 'PieChart',
'containerId': 'chart_div',
'options':
'width': 300,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
);
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(donutRangeSlider, pieChart);
// Draw the dashboard.
dashboard.draw(data);
</script>
</head>
<body>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="filter_div"></div>
<div id="chart_div"></div>
</div>
</body>
</html>
错误：
【问题讨论】：
【参考方案1】：此时文档和示例已经过时了。
对于最近发布的loader.js，需要包含'corechart' 包才能使图表正常工作。
请参阅以下工作示例...
// Load the Visualization API and the controls package.
google.charts.load('current', 'packages':['controls', 'corechart']);
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard()
// Create our data table.
var data = google.visualization.arrayToDataTable([
['Name', 'Donuts eaten'],
['Michael' , 5],
['Elisa', 7],
['Robert', 3],
['John', 2],
['Jessica', 6],
['Aaron', 1],
['Margareth', 8]
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var donutRangeSlider = new google.visualization.ControlWrapper(
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options':
'filterColumnLabel': 'Donuts eaten'
);
// Create a pie chart, passing some options
var pieChart = new google.visualization.ChartWrapper(
'chartType': 'PieChart',
'containerId': 'chart_div',
'options':
'width': 300,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
);
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(donutRangeSlider, pieChart);
// Draw the dashboard.
dashboard.draw(data);
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="filter_div"></div>
<div id="chart_div"></div>
</div>【讨论】：
代码就像一个魅力。感谢您的时间和精力。我想因为我使用了一种图表类型的 corechart（条形图、柱形图、线形图、面积图、阶梯形区域、气泡图、饼图、甜甜圈、组合、烛台、直方图、散点图），我应该将包作为依赖项加载。我需要 Controls 包，因为我使用过 NumberRangeFilter。以上是关于谷歌图表仪表板加载失败的主要内容，如果未能解决你的问题，请参考以下文章