谷歌图表条形图上的居中条形？答案

【问题标题】：Centered bars on a Google Chart BarChart?谷歌图表条形图上的居中条形？
【发布时间】：2011-07-05 15:53:19
【问题描述】：

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

【问题讨论】：

标签： javascript google-visualization bar-chart

【解决方案1】：

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

您可以通过将颜色属性 chco=ffffff,FF9900 更改为例如 chco=aaaaaa,FF9900 来亲自查看。

然后你会发现它是一个基本的堆叠图表，而不是真正的新图表。

以下代码显示了如何做到这一点：

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

【讨论】：