如何标记Google柱形图栏

Question

我正在使用Google Chart API为值创建图表,范围从1到数百万.

问题 表示较小值(例如:小于50左右)的条在图上是不可见的,我无法看到哪些值对应于某个x轴.

如果我能以某种方式在条形图上打印y轴值,这将得到解决.但是,我在API文档中找不到任何关于如何做的提及.

这里有类似的问题,但它没有回答我的问题.

在google交互式条形图中将标签放在内部栏的顶部

还有其他一些超过一年未解决的问题,我希望有人可能已经找到解决方案或解决方法,这就是为什么再次提出这个问题.

谷歌可视化:柱形图,简单的问题,但找不到答案

如何在Google Chart API列顶部显示值

你能告诉我如何实现我想要的东西如何定制这个谷歌条形图？？

Answer 1

在这里查看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: 'grey',
        lineWidth: 0,
        pointSize: 0,
        visibleInLegend: false
      }
    },
    vAxis: {
      maxValue: 100
    }
  });
}