呈现时分页符中的多个 google 个图表

Question

我正在使用 Google Chart，我正在尝试在单个 HTML 页面中插入两个条形图。

图形数据从两个单独的 AJAX 请求加载，并且正确呈现，如下所示：

当我再次通过运行更新第一个图的数据时，第一个 AJAX 请求，它破坏了第二个图的可视化：

这仅适用于垂直对齐的图形。乍一看，可视化似乎与第一张图的数据跨度有关。我也在使用 bootstrap 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

关于如何解决这个问题或至少如何调查它有什么想法吗？

Answer 1

仅供参考，这是 Google 可视化 API 开发人员确认的错误。 https://code.google.com/p/google-visualization-api-issues/issues/detail?id=1916

呈现时分页符中的多个 google 个图表

Multiple google charts in a page break on rendering

html

javascript

svg

twitter-bootstrap-3