annotations - Google Chart，如何在列顶部移动注释

Question

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



在我调查时，这似乎是 Google Chart 的一个错误，这个错误可以解释如下

[[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时，注释正确显示.

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



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

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

Answer 1

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

"As a workaround, you might consider using a ComboChart with an extra series to draw a point at the top of each column stack. You'll have to compute the total of the other series yourself to know where to put each point."

我从谷歌的图库中找到了一个组合图表并打开了 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(我们其他系列的总计)是 type: 'line' ，所以它总是指向栈顶。现在，我不一定想要图表中的线，因为它不用于比较连续的水平总计，所以我用 lineWidth: 0 更新了系列 5。 ，然后将该类别的标题设为 '' 以便它不会作为堆栈包含在图例中( 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);
}

瞧!