谷歌图表：上BARCHART

Question

水平基准线有一个BARCHART像下面

我希望能够（在80％为例）绘制一个水平参照线。然而，这在Google图表上似乎不可行。

我试过几件事情，包括与多个系列组合图表。 但是它不会很好看，因为hAxis是离散:(

您的帮助将是非常赞赏。

Answer 1

添加另一系列为参考线

用于所有相同的值行并更改系列类型'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); 
 
    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>

EDIT

在上述代码段中，所述基准线停止在第一和最后一列

的中心通过改变坐标延长线的列的边缘的参考线，
使用'ready'听众知道何时已绘制图表

的关键是找到你需要下面的代码片段一起工作，
特定的图表元素，将系列彩色用于查找列和参考线

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>