标签：javascript asynchronous data-visualization google-visualization
This question has been asked before,但关于旧的corechart API(我没有问题),而不是新的Material图表.例如,以下代码将按预期创建两个图表：
var data = [
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
];
google.load('visualization', '1', {
'packages': ['corechart']
});
google.setOnLoadCallback(drawChart);
function drawChart() {
new google.visualization.ColumnChart(document.getElementById('groupedBar')).draw(
new google.visualization.arrayToDataTable(data), {});
new google.visualization.ColumnChart(document.getElementById('stackedBar')).draw(
new google.visualization.arrayToDataTable(data), {isStacked:true});
}
http://jsfiddle.net/crclayton/r67ega11/10/
但是,更新的版本：
google.load('visualization', '1.1', { // note version 1.1 and bar package
'packages': ['bar']
});
google.setOnLoadCallback(drawChart);
function drawChart() {
new google.charts.Bar(document.getElementById('groupedBar')).draw(
new google.visualization.arrayToDataTable(data),
google.charts.Bar.convertOptions({}));
new google.charts.Bar(document.getElementById('stackedBar')).draw(
new google.visualization.arrayToDataTable(data),
google.charts.Bar.convertOptions({
isStacked: true
}));
}
http://jsfiddle.net/crclayton/r67ega11/6/
…将仅呈现其中一个图表,有时是第一个,有时是第二个.它不会抛出错误,只会忽略另一个错误.我尝试将它们分解为单个函数,将所有内容分配给变量,并以相同的结果重置google.setOnLoadCallback.
我还发现当渲染different types of charts时,我没有这个问题.
有任何想法吗？
解决方法:
在google-visualization-issues存储库中最有可能报告了the same issue：
The problems people have seen with the sizing of multiple instances of
material charts should be resolved with this new release. You can
change your code to load “1.1” now so that when the candidate release
becomes available, you will be using it.
目前至少有两种解决方案可用：
选项1.同步渲染图表
总体思路是同步绘制图表.由于绘图功能是异步的,因此我们为此目的使用了就绪事件处理程序.
更换：
function drawChart_() {
new google.charts.Bar(document.getElementById('groupedBar')).draw(
new google.visualization.arrayToDataTable(data),
google.charts.Bar.convertOptions({}));
new google.charts.Bar(document.getElementById('stackedBar')).draw(
new google.visualization.arrayToDataTable(data),
google.charts.Bar.convertOptions({
isStacked: true
}));
}
有：
function drawChart() {
var groupedBarChart = new google.charts.Bar(document.getElementById('groupedBar'));
google.visualization.events.addOneTimeListener(groupedBarChart, 'ready', function(){
var stackedBarChart = new google.charts.Bar(document.getElementById('stackedBar'));
stackedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({isStacked: true}));
});
groupedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({}));
}
例
var data = [
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
];
google.load('visualization', '1.1', {
'packages': ['bar']
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var groupedBarChart = new google.charts.Bar(document.getElementById('groupedBar'));
google.visualization.events.addOneTimeListener(groupedBarChart, 'ready', function(){
var stackedBarChart = new google.charts.Bar(document.getElementById('stackedBar'));
stackedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({isStacked: true}));
});
groupedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({}));
}
function drawChart_() {
new google.charts.Bar(document.getElementById('groupedBar')).draw(
new google.visualization.arrayToDataTable(data),
google.charts.Bar.convertOptions({}));
new google.charts.Bar(document.getElementById('stackedBar')).draw(
new google.visualization.arrayToDataTable(data),
google.charts.Bar.convertOptions({
isStacked: true
}));
}<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="chart.js"></script>
<div class="chart" id="groupedBar" style></div>
<div class="chart" id="stackedBar" style></div>选项2.使用冻结的版本加载器.
以来
The rollout of the v43 candidate release that would fix this problem
切换到使用冻结版本加载器.
脚步：
1)添加对加载器的引用：< script
SRC =“// www.gstatic.com/charts/loader.js\”\u0026gt;\u0026lt;/script\u0026gt;
2)然后加载43版本的库：google.charts.load(“ 43”,{packages：[“ bar”]});
3)更换：
google.setOnLoadCallback(drawChart);
同
google.charts.setOnLoadCallback(drawChart);
例
var data = [
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
];
google.charts.load("43",{packages:["bar","corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
new google.charts.Bar(document.getElementById('groupedBar')).draw(
new google.visualization.arrayToDataTable(data),
google.charts.Bar.convertOptions({}));
new google.charts.Bar(document.getElementById('stackedBar')).draw(
new google.visualization.arrayToDataTable(data),
google.charts.Bar.convertOptions({
isStacked: true
}));
}<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="groupedBar" style></div>
<div class="chart" id="stackedBar" style></div>标签：javascript,asynchronous,data-visualization,google-visualization 来源： https://codeday.me/bug/20191012/1897608.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。