Google Chart BarChart上的居中条形？

Question

有没有一种方法可以使用Google Chart Javascript API将条形图中心放置在类似于此的条形图上 - Google Chart Example？我想效仿谷歌图表的漏斗图。谷歌图表不支持漏斗类型的图表。

Answer 1

是的，这是可能的。基本上他们在这个例子中做的是创建一个基本的条形图（http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html）。为了获得这个'漏斗'效果，他们创建了一个堆叠图表（在javascript中查看isStacked属性）。第一个元素是白色，下一个元素是橙色。

您可以通过更改颜色属性chco = ffffff，FF9900为例如chco = aaaaaa，FF9900来看到这一点。

http://chart.apis.google.com/chart?cht=bhs&chco=aaaaaa,FF9900&chxt=x,x,y&chxl=1:|Percentage%20converting|2:|Step%206|Step%205|Step%204|Step%203|Step%202|Step%201&chxp=1,50|3,50&chd=t:0,12.5,28,29,35.5,48.5|100,75,44,42,29,3&chbh=a&chs=800x230&chm=N **％，000000,1，-1,11，，C & CHDS = 0,100

然后你就会看到，这是一个基本堆叠图表，而不是一个真正的新的图形。

下面的代码演示如何做到这一点：

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
    var raw_data = [['Invisible', 10, 20, 30, 40], 
        ['Visible', 80, 60, 40, 20]]; 

    var years = ["Step1", "Step2", "Step3", "Step4"]; 

    data.addColumn('string', 'Year'); 
    for (var i = 0; i < raw_data.length; ++i) { 
    data.addColumn('number', raw_data[i][0]);  
    } 

    data.addRows(years.length); 

    for (var j = 0; j < years.length; ++j) {  
    data.setValue(j, 0, years[j].toString());  
    } 
    for (var i = 0; i < raw_data.length; ++i) { 
    for (var j = 1; j < raw_data[i].length; ++j) { 
     data.setValue(j-1, i+1, raw_data[i][j]);  
    } 
    } 

    // Create and draw the visualization. 
    new google.visualization.BarChart(document.getElementById('visualization')). 
     draw(data, 
      {title:"Yearly Coffee Consumption by Country", 
      width:600, height:400, 
      colors: ['ffffff','aaaaaa'], 
      vAxis: {title: "Year"}, 
      hAxis: {title: "Cups", gridlineColor : 'ffffff'}, isStacked: true} 
    ); 
}