Google Chart BarChart上的居中条形？ [英] Centered bars on a Google Chart BarChart?

问题描述

有没有一种方法可以使用Google Chart Javascript API将条形图集中在类似于此的条形图上 -

解决方案

是的，这是可能的。基本上他们在这个例子中做的是创建一个基本的条形图（ 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 |步骤204％|步骤203％|步骤202％|步骤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

然后你会看到它是一个基本的堆积图，并不是一个新的图。

ing代码显示了如何执行此操作：

 函数drawVisualization（）{
 //创建并填充数据表。 
 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）; （var j = 0; j  data.setValue（j，0，years [j] .toString（））; 
 
 （var i = 0; i  for（var j = 1; j< raw_data [i] .length; + + j）{
 data.setValue（j-1，i + 1，raw_data [i] [j]）; 
} 
} 
 
 //创建并绘制可视化文件。 
 new google.visualization.BarChart（document.getElementById（'visualization'））。 
 draw（data，
 {title：按国家的每年咖啡消费量，
宽度：600，身高：400，
颜色：['ffffff'，'aaaaaa']] ，
 vAxis：{title：Year}，
 hAxis：{title：Cups，gridlineColor：'ffffff'}，isStacked：true} 
）; 
} 
  

Is there a way to use the Google Chart Javascript API to center bars on a bar chart similar to this - Google Chart Example? I would like to emulate a funnel graph wih Google Charts. Google Charts does not support a funnel type of graph.

解决方案

Yes that's possible. Basically what they're doing in this example is creating a basic bar chart (http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html). To get this 'funnel' effect, they create a stacked chart (in javascript see the isStacked property). The first element they color white and the next element in this example is orange.

You can see this for yourself by changing the color property: chco=ffffff,FF9900 to for instance 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

Then you'll see that it's a basic stacked chart, and not really a new kind of graph.

The following code shows how to do this:

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

​

这篇关于Google Chart BarChart上的居中条形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！