谷歌圖表：如何繪製條形圖的垂直線

我想添加一條垂直線，以便在元素超過該值時可以有一個視覺區別。谷歌圖表：如何繪製條形圖的垂直線

感謝

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", { 
    packages: ["corechart"] 
    }); 
    google.setOnLoadCallback(drawChart); 

    function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ["Element", "Difference", { 
       role: "style" 
      }], 
      ["FOLDERADDUPDATE", 2.29, "#e5e6e2"], 
      ["NOTEUPDATE", 3.63, "silver"], 
      ["DELETENOTE", 1.12, "e5e4e7"], 
      ["NOTEUPDATEANDFOLDER", 5.02, "color: #e5e4e2"], 
      ["FOLDERREMOVEUPDATE",.082,"color:e5e5e2"], 
      ["PENDINGEVENT", 0,"color:e5e4e4"] 
     ]); 

     var view = new google.visualization.DataView(data); 
     view.setColumns([0, 1, { 
      calc: "stringify", 
      sourceColumn: 1, 
      type: "string", 
      role: "annotation" 
     }, 
     2]); 

     var options = { 
      title: "", 
      width: 600, 
      height: 300, 
      bar: { 
       groupWidth: "95%" 
      }, 
      legend: { 
       position: "none" 
      }, 
     }; 
     var chart = new google.visualization.BarChart(document.getElementById("barchart_values")); 
     chart.draw(view, options); 
} 
</script>

來源

2015-11-06 Luisito

您是否嘗試過使用Google的ComboChart？我之前把ColumnChart和LineChart結合起來（但是這是水平線） – Yani

下面的例子說明了如何繪製額外的垂直線

google.load('visualization', '1', {packages: ['corechart']}); 
 
google.setOnLoadCallback(drawChart); 
 

 
    
 
function drawChart() { 
 
     var data = google.visualization.arrayToDataTable([ 
 
      ["Element", "Difference", { 
 
       role: "style" 
 
      }], 
 
      ["FOLDERADDUPDATE", 2.29, "#e5e6e2"], 
 
      ["NOTEUPDATE", 3.63, "silver"], 
 
      ["DELETENOTE", 1.12, "e5e4e7"], 
 
      ["NOTEUPDATEANDFOLDER", 5.02, "color: #e5e4e2"], 
 
      ["FOLDERREMOVEUPDATE",.082,"color:e5e5e2"], 
 
      ["PENDINGEVENT", 0,"color:e5e4e4"] 
 
     ]); 
 

 
     var view = new google.visualization.DataView(data); 
 
     view.setColumns([0, 1, { 
 
      calc: "stringify", 
 
      sourceColumn: 1, 
 
      type: "string", 
 
      role: "annotation" 
 
     }, 
 
     2]); 
 

 
     var options = { 
 
      title: "", 
 
      width: 600, 
 
      height: 300, 
 
      bar: { 
 
       groupWidth: "95%" 
 
      }, 
 
      legend: { 
 
       position: "none" 
 
      } 
 
     }; 
 
     var chart = new google.visualization.BarChart(document.getElementById("barchart_values")); 
 
     chart.draw(view, options); 
 
     drawVAxisLine(chart, 3.0); //set x value where line shoud be located 
 
} 
 

 
function drawVAxisLine(chart,value){ 
 
    var layout = chart.getChartLayoutInterface(); 
 
    var chartArea = layout.getChartAreaBoundingBox(); 
 

 
    var svg = chart.getContainer().getElementsByTagName('svg')[0]; 
 
    var xLoc = layout.getXLocation(value) 
 
    svg.appendChild(createLine(xLoc,chartArea.top + chartArea.height,xLoc,chartArea.top,'#00cccc',4)); // axis line 
 
} 
 

 
function createLine(x1, y1, x2, y2, color, w) { 
 
    var line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); 
 
    line.setAttribute('x1', x1); 
 
    line.setAttribute('y1', y1); 
 
    line.setAttribute('x2', x2); 
 
    line.setAttribute('y2', y2); 
 
    line.setAttribute('stroke', color); 
 
    line.setAttribute('stroke-width', w); 
 
    return line; 
 
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
<div id="barchart_values"></div>

來源

2015-11-07 09:49:26

感謝弗拉迪姆，這個作品！ – Luisito

也許這？

插入在選項ticks:並輸入所希望的值（例如1,3,5,7在本例中）

 hAxis: { 
      title: 'My Values', 
      ticks: [1,3,5,7], 
      minValue: 0 
     }

JSFiddle

來源

2015-11-06 22:35:43

比上面的更好！謝謝 – Norman

谷歌圖表：如何繪製條形圖的垂直線

回答

相關問題