Google Chart,如何在列顶部移动注释

Question

我正在使用谷歌图表的堆积柱形图,我想要实现的是显示每列顶部的总数,我正在使用注释.当您查看图像时,不知何故只有第5列(1,307.20)上的注释按预期工作.

在我调查的时候,这看起来像是谷歌图表的一个错误,这个错误可以解释如下

[[Date, Car, Motobike, {role: :annotation}],
[June 2015, 500, 0, 500],
[Feb 2015, 500, 600, 1100]]
[March 2015, 700, 0, 700],

使用上面的数据,2015年2月的注释是唯一正确显示的注释,另外2个没有,因为当时的最后一个值是0,当我在6月和3月将最后一个值更改为1时,注释正确显示.

然后我想到一个解决方法是始终在顶部显示"非零"数据,这是结果:

正确地将注释移到顶部,但正如您所看到的,它位于列中,我想要实现的是将其移动到列的顶部.

我坚持了一段时间,谷歌文档对这种情况没有多大帮助.任何帮助将受到高度赞赏

Answer 1

我有同样的问题,我的一些系列中有0作为我的最后一个值,因此标签将显示在X轴而不是顶部.对于动态数据,确保最后一个值永远不是0将是一个真正的挑战.@ dlaliberte给了我一个提示,从这个评论开始:

"作为一种解决方法,您可以考虑使用带有额外系列的ComboChart在每个列堆栈的顶部绘制一个点.您必须自己计算其他系列的总数,以了解每个点的位置."

我从谷歌的画廊找到了一个组合图表并打开了jsfiddle,看看我能做些什么.我大部分都留下了数据,但更改了系列名称标签,使数字更简单一些.不要陷入数据无关的图表的目的,我只是想弄清楚如何将我的注释放到图的顶部,即使最后一列是0(https://jsfiddle.net/ L5wc8rcp/1 /):

function drawVisualization() {
    // Some raw data (not necessarily accurate)
    var data = google.visualization.arrayToDataTable([
        ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Total', {type: 'number', role: 'annotation'}],
        ['Application', 5, 2, 2, 8, 0, 17, 17],
        ['Friend', 4, 3, 5, 6, 2, 20, 20],
        ['Newspaper', 6, 1, 0, 2, 0, 9, 9],
        ['Radio', 8, 0, 8, 1, 1, 18, 18],
        ['No Referral', 2, 2, 3, 0, 6, 13, 13]
    ]);

    var options = {
        isStacked: true,
        title : 'Monthly Coffee Production by Country',
        vAxis: {title: 'Cups'},
        hAxis: {title: 'Month'},
        seriesType: 'bars',
        series: {5: {type: 'line'}},
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

这产生了这个图,这是一个很好的开始:

正如你所看到的,因为系列5(我们的其他系列的总和)是a type: 'line',所以它总是指向堆栈的顶部.现在,我不一定想要在我的图表中使用该行,因为它不用于比较连续的水平总计,因此我更新了系列5 lineWidth: 0,然后将该类别的标题设为'',以便它不会被包括在内在图例中作为一个堆栈(https://jsfiddle.net/Lpgty7rq/):

function drawVisualization() {
    // Some raw data (not necessarily accurate)
    var data = google.visualization.arrayToDataTable([
        ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', '', {type: 'number', role: 'annotation'}],
        ['Application', 5, 2, 2, 8, 0, 17, 17],
        ['Friend', 4, 3, 5, 6, 2, 20, 20],
        ['Newspaper', 6, 1, 0, 2, 0, 9, 9],
        ['Radio', 8, 0, 8, 1, 1, 18, 18],
        ['No Referral', 2, 2, 3, 0, 6, 13, 13]
    ]);

    var options = {
        isStacked: true,
        title : 'Monthly Coffee Production by Country',
        vAxis: {title: 'Cups'},
        hAxis: {title: 'Month'},
        seriesType: 'bars',
        series: {5: {type: 'line', lineWidth: 0}}, 
    };

   var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
   chart.draw(data, options);
}

还有瞧!

Answer 2

使用alwaysOutside: true。

annotations: {
     textStyle: {
         color: 'black',
         fontSize: 11,
     },
     alwaysOutside: true
}

Answer 3

您将需要使用annotations.alwaysOutside选项：

annotations.alwaysOutside——在条形图和柱形图中，如果设置为 true，则在条形图/柱形图之外绘制所有注释。

请参阅https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart

但是，对于堆叠图表，注释当前始终强制位于列内。这将在下一个主要版本中修复。

作为解决方法，您可以考虑使用带有额外系列的组合图在每个列堆栈的顶部绘制一个点。您必须自己计算其他系列的总和才能知道将每个点放在哪里。然后将pointSize设置为0，并在该系列后面添加注释列。