Google 组合图 - 具有多个条形图和线条的区间

Question

我正在尝试创建一个包含多个条形和线条的组合图表。由于线条是平均值，我也想添加最小和最大误差线。谷歌将这些称为“间隔”。

问题在于线条与条的中心对齐（在两者之间，这很好），但这些线条的间隔似乎与第一个条对齐。看我的例子。 Example of issue

我的代码如下。非常感谢任何帮助！也许这是一个谷歌错误？或者是否有我错过的对齐参数？

JSFiddle Here

      google.charts.load('current', {'packages': ['corechart']});
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    // Some raw data (not necessarily accurate)
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Week'); // Implicit domain label col.

    data.addColumn('number', 'A average'); // Implicit series 1 data col.
    data.addColumn({type: 'string', role: 'annotation'}); // annotationText col.

    data.addColumn('number', 'A rolling average'); // Implicit series 1 data col.
    data.addColumn({type: 'number', role: 'interval'});  // interval role col.
    data.addColumn({type: 'number', role: 'interval'});  // interval role col.

    data.addColumn('number', 'B average'); // Implicit series 1 data col.
    data.addColumn({type: 'string', role: 'annotation'}); // annotationText col.

    data.addColumn('number', 'B 4wk average'); // Implicit series 1 data col.
    data.addColumn({type: 'number', role: 'interval'});  // interval role col.
    data.addColumn({type: 'number', role: 'interval'});  // interval role col.
    data.addRows([ 
      ['1 (01/03/17)', 0.1, 'A1', 0.2, 0.19, 0.21, 0.20, 'A2', 0.67, 0.66, 0.68],  
      ['2 (08/03/17)', 0.23, 'B1', 0.90, 0.89, 0.91, 0.76, 'B2', 0.43, 0.42, 0.44],  
      ['3 (15/03/17)', 0.10, 'C1', 0.65, 0.63, 0.66, 0.34, 'C2', 0.89, 0.88, 0.90],  
      ['4 (22/03/17)', 0.22, 'D1', 0.20, 0.19, 0.21, 0.23, 'D2', 0.43, 0.42, 0.44]
      //  ['1 (01/03/17)',10,  2, 11,  'A'],
        //  ['2 (08/03/17)',  23, 20, 25,  'B'],
        //  ['3 (15/03/17)',  1,  0.95,  1.15,  'C'],
        //  ['4 (22/03/17)', 22, 20, 30, 'D']
    ]);


    var options = {
      title: 'Test',
      vAxis: {
        title: '% average',
        format: '# %'
      },
      hAxis: {
        title: 'Week number (week commencing)'
      },
      seriesType: 'bars',
      series: {
        1: {type: 'line'},
        3: {type: 'line'}
      },
      intervals: {
        style: 'boxes'
      }
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);

  }

Answer 1

看起来像一个错误 -- 当间隔与多个列（条形）系列一起使用时，
间隔正确对齐，否则......

当图表的'ready' 事件触发时，一种选择是手动移动它们

但是，图表会将间隔发送回其原始位置，
任何时候都有交互性，比如hover或者select

因此，MutationObserver 可用于了解何时发生交互，
为了设置间隔的所需位置

---

请参阅以下工作 sn-p，
当'ready' 事件触发时，间隔将移动到新的 x 坐标，
当 interactivity 发生时，新的 x 坐标会被保存并重新应用...

google.charts.load('current', {
  callback: drawVisualization,
  packages: ['corechart']
});

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Week'); // Implicit domain label col.

  data.addColumn('number', 'A average'); // Implicit series 1 data col.
  data.addColumn({type:'string', role:'annotation'}); // annotationText col.

  data.addColumn('number', 'A rolling average'); // Implicit series 1 data col.
  data.addColumn({type:'number', role:'interval'});  // interval role col.
  data.addColumn({type:'number', role:'interval'});  // interval role col.

  data.addColumn('number', 'B average'); // Implicit series 1 data col.
  data.addColumn({type:'string', role:'annotation'}); // annotationText col.

  data.addColumn('number', 'B 4wk average'); // Implicit series 1 data col.
  data.addColumn({type:'number', role:'interval'});  // interval role col.
  data.addColumn({type:'number', role:'interval'});  // interval role col.
  data.addRows([
    ['1 (01/03/17)',0.10, 'A1', 0.20,0.19,0.21, 0.20, 'A2', 0.67,0.66,0.68],
    ['2 (08/03/17)',0.23, 'B1', 0.90,0.89,0.91, 0.76, 'B2', 0.43,0.42,0.44],
    ['3 (15/03/17)',0.10, 'C1', 0.65,0.63,0.66, 0.34, 'C2', 0.89,0.88,0.90],
    ['4 (22/03/17)',0.22, 'D1', 0.20,0.19,0.21, 0.23, 'D2', 0.43,0.42,0.44]
  ]);

  var options = {
    title : 'Test',
    vAxis: {title: '% average',format:'# %'},
    hAxis: {title: 'Week number (week commencing)'},
    height: 600,
    seriesType: 'bars',
    series: {
      1: {type: 'line'},
      3: {type: 'line'}
    },
    tooltip: {trigger: 'both'},
    intervals: {style: 'boxes'},
    width: 900
  };

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.ComboChart(chartDiv);

  var observer = new MutationObserver(function () {
    getIntervals().forEach(function (rect, index) {
      rect.setAttribute('x', xCoords[index]);
    });
  });

  var xCoords = {};
  google.visualization.events.addListener(chart, 'ready', function () {
    getIntervals().forEach(function (rect, index) {
      xCoords[index] = parseFloat(rect.getAttribute('x')) + 22;
      rect.setAttribute('x', xCoords[index]);
    });

    observer.observe(chartDiv, {
      childList: true,
      subtree: true
    });
  });

  function getIntervals() {
    var intervals = [];
    Array.prototype.forEach.call(chartDiv.getElementsByTagName('rect'), function(rect) {
      if ((rect.getAttribute('fill') === '#a52b0e') ||
          (rect.getAttribute('fill') === '#0c7112')) {
        intervals.push(rect);
      }
    });
    return intervals;
  }

  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

---

注意：用于移动 x 坐标 (22) 的偏移量将保持不变，
只要图表的大小保持不变
如果图表的宽度发生变化，可能需要进行调整...