10

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

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

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

这里有类似的问题，但它没有回答我的问题。

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

这里还有一些超过一年的未解决问题，我希望现在有人可能已经找到了解决方案或解决方法，这就是为什么再次问这个问题。

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

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

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

4

2 回答 2

19

在这里查看 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
    }
  });
}
于 2013-06-11T15:38:23.377 回答
4

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

我已经对ComboChart（可以使用BarChart并且ColumnChart也可以进行一些更改）将标签插入 SVG 进行了修改。

看看这个小提琴：http: //jsfiddle.net/augustomen/FE2nh/

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

于 2013-07-04T14:41:42.400 回答