Google图表：条形图上的水平参考线

Question

如下所示的条形图

我希望能够绘制水平参考线（例如80％）。但是，Google Charts似乎无法做到这一点。

我尝试过几件事，包括多个系列的组合图表。 然而，由于hAxis是离散的，因此它看起来不会很好：（

非常感谢您的帮助。

Answer 1

为参考线

添加另一个系列

对所有行使用相同的值，并将系列类型更改为'line'

请参阅以下工作代码段...

＆＃13;

＆＃13;

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Category', 'Value', 'Reference'],
    ['Quant', 0.10, 0.80],
    ['Verbal', 0.30, 0.80],
    ['Total', 0.20, 0.80]
  ]);

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(chartDiv);
  chart.draw(data, {
    colors: ['lime', 'magenta'],
    legend: 'none',
    series: {
      1: {
        type: 'line'
      }
    },
    title: 'Percentile Score',
    vAxis: {
      format: 'percent',
      viewWindow: {
        min: 0,
        max: 1
      }
    }
  });
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑

在上面的代码段中，参考线停在第一列和最后一列的中心

通过更改参考线的坐标，将线延伸到列的边缘 使用'ready'监听器知道何时绘制图表

关键是找到您需要使用的特定图表元素，
在以下代码段中，系列颜色用于查找列和参考线

＆＃13;

＆＃13;

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Category', 'Value', 'Reference'],
    ['Quant', 0.10, 0.80],
    ['Verbal', 0.30, 0.80],
    ['Total', 0.20, 0.80]
  ]);

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

  // use colors to find chart elements
  var colorMagenta = '#ff00ff';
  var colorLime = '#00ff00';

  var xBeg;    // save first x coord
  var xWidth;  // save width of column

  var rowIndex = -1;  // find first column

  google.visualization.events.addListener(chart, 'ready', function () {
    // columns
    Array.prototype.forEach.call(chartDiv.getElementsByTagName('rect'), function(rect, index) {
      if (rect.getAttribute('fill') === colorLime) {
        rowIndex++;
        xWidth = parseFloat(rect.getAttribute('width')) / 2;
        if (rowIndex === 0) {
          xBeg = parseFloat(rect.getAttribute('x'));
        }
      }
    });

    // reference line
    Array.prototype.forEach.call(chartDiv.getElementsByTagName('path'), function(path, index) {
      if (path.getAttribute('stroke') === colorMagenta) {
        // change line coords
        var refCoords = path.getAttribute('d').split(',');
        refCoords[0] = 'M' + xBeg;
        var refWidth = refCoords[2].split('L');
        refWidth[1] = parseFloat(refWidth[1]) + xWidth;
        refCoords[2] = refWidth.join('L');
        path.setAttribute('d', refCoords.join(','));
      }
    });
  });

  chart.draw(data, {
    colors: [colorLime, colorMagenta],
    legend: 'none',
    series: {
      1: {
        type: 'line'
      }
    },
    title: 'Percentile Score',
    vAxis: {
      format: 'percent',
      viewWindow: {
        min: 0,
        max: 1
      }
    }
  });
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;