Google图表:条形图上的水平参考线 [英] Google Charts: Horizontal Reference Line on Barchart

问题描述

具有如下所示的条形图

我希望能够绘制水平参考线(例如80％).但是，这似乎在Google图表上是不可能的.

I want to be able to draw an horizontal reference line (For example at 80%). However this doesn't seem to be possible on Google Charts.

我已经尝试了几种方法，包括具有多个系列的组合图.但是，由于hAxis是离散的:(

I've tried several things, including combo charts with multiple series. However it won't look very nice since the hAxis is discrete :(

非常感谢您的帮助.

推荐答案

为参考线

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

use the same value for all rows and change the series type to 'line'

请参阅以下工作摘要...

see following working snippet...

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

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

编辑

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

in the above snippet, the reference line stops at the center of the first and last columns

通过更改参考线的坐标将线扩展到列的边缘，
使用'ready'侦听器了解何时绘制图表

extend the line to the edges of the columns by changing the coordinates of the reference line,
use the 'ready' listener to know when the chart has been drawn

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

the key is finding the specific chart elements you need to work with,
in the following snippet, the series color is used to find the columns and reference line

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

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

这篇关于Google图表:条形图上的水平参考线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！