Question

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

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

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

      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'事件触发时，一个选项是手动移动

但是，图表会将间隔发送回原来的位置，
任何时候有交互性，例如悬停或选择

因此，可以使用MutationObserver来了解交互性何时发生，
为了设置间隔的期望位置

请参阅以下工作片段，
当'ready'事件触发时，间隔移动到新的x坐标，
然后，当交互发生时，保存并重新应用新的x坐标...

＆＃13;

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);
}

＆＃13;

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

＆＃13;

注意：用于移动x坐标（22）的偏移量将保持不变，
只要图表的大小保持不变
如果图表的宽度改变，可能需要调整......

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

1 个答案: