如何为Google列图表的条形图添加标签

Question

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

问题 代表较小值（例如小于50）的条形图在图表上是不可见的，因此我无法看到哪些值对应特定的x轴。

如果可以在条形上方打印y轴值，这个问题就会得到解决。但是，在API文档中我找不到如何实现此功能的任何说明。

有类似问题的帖子，但它没有回答我的问题。

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

这里还有一些其他超过一年未得到解答的问题，我希望现在有人已经找到了解决方案或< strong>解决方法，所以再次提出这个问题。

Google Visualization：Column Chart，简单的问题但找不到答案

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

您能否向我展示如何使用如何自定义此Google Bar图表？实现我想要的效果？

- Watt

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

- Jeremy Faller

---

+1 感谢提供链接。我找到了另一个解决方法，只需使用对数刻度来显示y轴值 vAxis:{logScale:true}。 - Watt

有没有办法在不同的颜色之间进行区分。例如，如果在40到80之间，则为红色，如果是80或更高，则为黄色？ - benji_r

如果我想在任何一个条形图上标记，而其他的则应该是空的，没有任何线条，怎么办？http://jsfiddle.net/z05kfm8b/ - Yaseen Ahmad

Answer 2

在使用注释和无形线时，我遇到了一些挫折（例如，在工具提示中显示为另一个系列）。

我对 ComboChart 进行了一些修改（也可以通过几个更改与 BarChart 和 ColumnChart 一起使用），将标签插入SVG中。

请查看此fiddle：http://jsfiddle.net/augustomen/FE2nh/

在Firefox 21、Chrome 27和IE 9上进行了测试。

- augustomen