javascript – Google Chart BarChart上的中心栏？

2019-07-23 18:32:59 阅读：136 来源： 互联网

标签：javascript google-visualization bar-chart

有没有办法使用谷歌图表Javascript API来中心条形图上的条形图 – Google Chart Example？我想用谷歌图表模拟一个漏斗图. Google图表不支持渠道类型的图表.

解决方法:

是的,这是可能的.基本上他们在这个例子中正在做的是创建一个基本的条形图(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}
      );
}

标签：javascript,google-visualization,bar-chart
来源： https://codeday.me/bug/20190723/1515702.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – Google Chart BarChart上的中心栏？