Google Charts: Horizontale Referenzlinie auf Barchart

Question

eine Barchart wie folgt

Ich möchte Mit einer horizontalen Referenzlinie in der Lage sein (bei 80%) Zum Beispiel zu zeichnen. Dies scheint jedoch in Google Charts nicht möglich zu sein.

Ich habe mehrere Dinge ausprobiert, darunter Combo Charts mit mehreren Serien. Allerdings wird es sieht nicht sehr schön, da die hAxis diskret ist :(

Ihre Hilfe sehr geschätzt würde.

Answer 1

eine weitere Serie für den gleichen Wert für alle verwenden

Referenzlinie hinzufügen Zeilen und die Art ändern Serie 'line'

folgenden Arbeits Schnipsel sehen ...

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

im obigen Schnipsel, stoppt der Referenzlinie in der Mitte der ersten und letzten Spalten

die Leitung zu den Rändern der Spalten erstrecken, indem sie die Koordinaten ändernden der Referenzlinie,
Verwenden Sie die 'ready' Listener zu wissen, wenn das Diagramm gezeichnet wurde

der Schlüssel ist, um die spezifischen Diagrammelemente zu finden, mit denen Sie arbeiten müssen,
im folgenden Ausschnitt, die Serie Farbe wird verwendet, um die Spalten und Bezugslinie

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>