Google Chart BarChartの中央に配置された棒グラフですか？

Question

Google Chart Javascript APIを使用して、このような棒グラフを中央に配置する方法はありますか？Google Chart Example？ Google Chartsのファンネルグラフをエミュレートしたいと思います。 Google Chartsでは、漏斗タイプのグラフはサポートされていません。

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、& CHDの= 0100

C次に、あなたはそれが本当に、グラフの新しい種類ではない基本的な積み上げグラフだし、ということがわかります。

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