Javascript 渲染时在分页符中显示多个google图表
我正在使用,并试图在一个HTML页面中插入两个条形图 Graphs数据从两个单独的AJAX请求加载,并正确呈现,如下所示: 当我通过再次运行第一个AJAX请求来更新第一个图形的数据时,它破坏了第二个图形的可视化: 这仅适用于垂直对齐的图形。乍一看,相对于第一个图形的数据范围,可视化似乎中断了。我也在使用bootstrap3。I包括相关代码: 标记:Javascript 渲染时在分页符中显示多个google图表,javascript,html,svg,twitter-bootstrap-3,Javascript,Html,Svg,Twitter Bootstrap 3,我正在使用,并试图在一个HTML页面中插入两个条形图 Graphs数据从两个单独的AJAX请求加载,并正确呈现,如下所示: 当我通过再次运行第一个AJAX请求来更新第一个图形的数据时,它破坏了第二个图形的可视化: 这仅适用于垂直对齐的图形。乍一看,相对于第一个图形的数据范围,可视化似乎中断了。我也在使用bootstrap3。I包括相关代码: 标记: <div class="row"> <div class="col-md-12"> <div clas
<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>
JS:
关于如何解决这个问题,或者至少是如何研究它,你有什么想法吗?仅供参考,这是谷歌可视化API开发人员确认的一个错误
.chart {
display: block;
height: 400px;
}
.chart-content {
width: 100%;
height: 100%;
}
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