8

我正在使用谷歌图表的堆积柱形图，我想要实现的是在每列的顶部显示总数，我为此使用了注释。当您查看图像时，不知何故，只有第 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 个没有，因为 then 的最后一个值为 0 ，当我将 6 月和 3 月的最后一个值更改为 1 时，注释正确显示.

然后我想到一个解决方法是始终在 top 上显示“非零”数据，结果如下：

在此处输入图像描述

注释已正确移动到顶部，但如您所见，它位于列内，我想要实现的是将其移动到列顶部。

我对此坚持了一段时间，谷歌文档对这种情况没有多大帮助。任何帮助将不胜感激

4

3 回答 3

6

我遇到了同样的问题，我的一些系列的最后一个值是 0，所以标签会显示在 X 轴上而不是顶部。对于动态数据，确保最后一个值永远不会为 0 将是一个真正的挑战。@dlaliberte 给了我一个提示，从这个评论开始：

“作为一种解决方法，您可以考虑使用带有额外系列的 ComboChart 在每个列堆栈的顶部绘制一个点。您必须自己计算其他系列的总数才能知道将每个点放在哪里。”

我从 google 的图库中找到了一个组合图，然后打开 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);
}

瞧！

在此处输入图像描述

于 2015-09-24T18:50:50.020 回答
5

使用alwaysOutside: true.

annotations: {
     textStyle: {
         color: 'black',
         fontSize: 11,
     },
     alwaysOutside: true
}
于 2016-09-09T14:29:22.437 回答
4

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

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

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

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

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

于 2015-06-04T14:33:16.380 回答