如何标记Google栏图表列 [英] How to label Google Column Chart bars

问题描述

我使用 Google图表API 来创建从1到数百万的值的图表。

问题
表示较小值（例如：小于50左右）的条形在图形上不可见，我可以看到什么值对应于某个x轴。

如果我能以某种方式打印y轴的值，在bars.But，我couldn'

在这里有类似的问题，但它不能回答我的问题。

将标签放在谷歌互动条形图的内部栏的顶部

这里还有一些超过一年的未回答的问题，我希望有人可能发现解决方案或解决方法，这就是为什么再次提出此问题的原因。

Google可视化：列图，简单问题，但找不到答案

如何显示列Google图表API顶部的值

您能告诉我如何实现我想要的如何自定义此Google条形图？？

解决方案

查看Andrew Gallant的JSFiddle这里：

http://jsfiddle.net/asgallant/QjQNX/

它使用了一个聪明的黑客组合图完成我想要的。

  google.load（visualization，1 ，{packages：[corechart]}）; 
 google.setOnLoadCallback（drawChart）; 
 
 function drawChart（）{
 var data = new google.visualization.DataTable（）; 
 data.addColumn（'string'，'Name'）; 
 data.addColumn（'number'，'Value'）; 
 data.addColumn（{type：'string'，role：'annotation'}）; 
 
 data.addRows（[
 ['Foo'，53，'Foo text']，
 ['Bar'，71，'Bar text']，
 ['Baz'，36，'Baz text']，
 ['Cad'，42，'Cad text']，
 ['Qud'，87，'Qud text']，
 ['Pif'，64，'Pif text'] 
]）; 
 
 var view = new google.visualization.DataView（data）; 
 view.setColumns（[0，1，1，2]）; 
 
 var chart = new google.visualization.ComboChart（document.getElementById（'chart_div'））; 
 
 chart.draw（view，{
 height：400，
 width：600，
 series：{
 0：{
 type ：'bars'
}，
 1：{
 type：'line'，
 color：'gray'，
 lineWidth：0，
 pointSize ：0，
 visibleInLegend：false 
} 
}，
 vAxis：{
 maxValue：100 
} 
} 
} 
  

I am using Google Chart API to create chart for values which goes from 1 to millions.

Problem The bars which are representing smaller values (ex: less than 50 or so) are invisible on graph and no way I can see what values correspond to certain x-axis.

This would be solved if I can somehow print y-axis values on top of bars.But, I couldn't find any mention in the API doc on how to do it.

There is similar problem here, but it doesn't answers my question.

put labels on top of inside bar in google interactive bar chart

There are some other more than year old unanswered questions here, I am hoping someone might have found a solution or a workaround by now, that is why asking this question again.

Google Visualization: Column Chart, simple question but can't find the answer

How to show values on the the top of columns Google Chart API

Can you show me how to achieve what I want using How can I customize this Google Bar Chart? ?

解决方案

Check out Andrew Gallant's JSFiddle here:

http://jsfiddle.net/asgallant/QjQNX/

It uses a clever hack of a combo chart to accomplish what I think you're looking for.

google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Value');
  data.addColumn({type: 'string', role: 'annotation'});

  data.addRows([
    ['Foo', 53, 'Foo text'],
    ['Bar', 71, 'Bar text'],
    ['Baz', 36, 'Baz text'],
    ['Cad', 42, 'Cad text'],
    ['Qud', 87, 'Qud text'],
    ['Pif', 64, 'Pif text']
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, 1, 2]);

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

  chart.draw(view, {
    height: 400,
    width: 600,
    series: {
      0: {
        type: 'bars'
      },
      1: {
        type: 'line',
        color: 'grey',
        lineWidth: 0,
        pointSize: 0,
        visibleInLegend: false
      }
    },
    vAxis: {
      maxValue: 100
    }
  });
}

这篇关于如何标记Google栏图表列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！