[英]Multiple google charts in a page break on rendering
我正在使用Google Chart ,并且试图在单个HTML页面中插入两个条形图。
图形数据是从两个单独的AJAX请求中加载的,并且可以正确呈现,如下所示:
当我通过再次运行第一个AJAX请求更新第一张图的数据时,它破坏了第二张图的可视化:
仅对于垂直对齐的图形会发生这种情况。 乍看之下,可视化效果似乎相对于第一个图的数据范围中断了。 我也在使用引导程序3。我包括相关代码:
标记:
<div class="row">
<div class="col-md-12">
<div class="chart">
<div class="chart-content" id="chart1"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="chart">
<div class="chart-content" id="chart2"></div>
</div>
</div>
</div>
CSS:
.chart {
display: block;
height: 400px;
}
.chart-content {
width: 100%;
height: 100%;
}
JS:
var charts = {}
var chart1Update = function() {
$.ajax({
...
success: function(res){
// res manipulation
// ...
var data = new google.visualization.arrayToDataTable(res);
var options = {
legend: {position: 'none'},
bars: 'horizontal',
bar: {groupWidth: "90%"},
colors: ['#26A9D4']
}
if(!charts.chart1){
charts.chart1 = new google.charts.Bar(document.getElementById('chart1'));
google.visualization.events.addListener(charts.chart1, 'ready', function(){ // .. irrelevant stuff }
charts.chart1.draw(data, options);
}
})
}
// chart2Update -> identical to chart1Update with only reference to chart1 changed to chart2, plus a different color
关于如何解决这个问题或至少如何进行调查的任何想法?
仅供参考,此错误已由Google Visualization API开发人员确认。 https://code.google.com/p/google-visualization-api-issues/issues/detail?id=1916
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.