如何标记谷歌柱状图栏 [英] How to label Google Column Chart bars

问题描述

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

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

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

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.

如果我能以某种方式在条形顶部打印 y 轴值，这将得到解决.但是，我在 API 文档中找不到任何关于如何执行此操作的提及.

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.

将标签放在谷歌交互式条形图中的内部条形

这里还有其他一些多年前未得到解答的问题，我希望现在有人可能已经找到了解决方案或解决方法，这就是再次提出这个问题的原因.

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 Chart API 列顶部的值

你能告诉我如何使用 如何实现我想要的我自定义此 Google 条形图? ?

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

推荐答案

在此处查看 Andrew Gallant 的 JSFiddle:

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

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