移动 Google Chart 列注释位置 [英] Moving Google Chart column annotation position

问题描述

我正在使用下面的代码生成一个柱形图，其中的数字在柱内，但我真的希望它们位于条形的底部而不是顶部.

I'm using the below code to produce a column chart with the figures inside the columns, but I'd really like them to be positioned at the bottom of the bars and not the top.

这是我拥有的图表的视觉效果:

Here's a visual of the chart I have:

    var data = google.visualization.arrayToDataTable([
        ['Type', 'Completed', 'Outstanding'],
        ['Item 1', 75, 25],
        ['Item 2', 50, 40],
        ['Item 3', 80, 15]
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
        {
            calc: "stringify",
            sourceColumn: 1,
            type: "string",
            role: "annotation"
        },
        2,
        {
            calc: "stringify",
            sourceColumn: 2,
            type: "string",
            role: "annotation"
        }]);

    var options = {
        legend: 'none',
        height: 270,
        chartArea: { 'width': '80%', 'height': '80%' },
        bar: { groupWidth: '80%' },
        vAxis: {
            textPosition: 'none',
            gridlines: {
                color: 'transparent'
            }
        },
      series: {
          0: { color: '#00A887' },
          1: { color: '#F6323E' },
        }

    };

    var chart = new google.visualization.ColumnChart(document.getElementById('northPMChart'));

    chart.draw(view, options);

非常感谢任何帮助.

推荐答案

没有标准的配置选项 用于将注释移动到底部

there are no standard configuration options for moving annotations to the bottom

可以调整annotations.stem.length从默认位置开始调整

you can adjust annotations.stem.length to adjust from the default position

但这会将所有注释移动相同的距离，

but this will move all the annotations the same distance,

在这里行不通

您可以手动移动注释，如下面的代码片段...

you can manually move the annotations, as in the following snippet...

但是，使用getImageURI时不会反映自定义修改，
如果您需要生成图表的 png 图像

however, custom modifications will not be reflected when using getImageURI,
if you need to produce a png image of the chart

此外，图表会将注释移回其原始位置，
随时有交互性，例如列悬停

also, the chart will move the annotations back to their original location,
anytime there interactivity, such as column hover

所以必须使用 MutationObserver 将它们移回，当活动发生时......

so must use a MutationObserver to move them back, when activity occurs...

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Type', 'Completed', 'Outstanding'],
        ['Item 1', 75, 25],
        ['Item 2', 50, 40],
        ['Item 3', 80, 15]
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
        {
            calc: "stringify",
            sourceColumn: 1,
            type: "string",
            role: "annotation"
        },
        2,
        {
            calc: "stringify",
            sourceColumn: 2,
            type: "string",
            role: "annotation"
        }]);

    var options = {
        legend: 'none',
        height: 270,
        chartArea: { 'width': '80%', 'height': '80%' },
        bar: { groupWidth: '80%' },
        vAxis: {
            textPosition: 'none',
            gridlines: {
                color: 'transparent'
            }
        },
      series: {
          0: { color: '#00A887' },
          1: { color: '#F6323E' },
        }

    };

    var container = document.getElementById('northPMChart');
    var chart = new google.visualization.ColumnChart(container);

    // move annotations
    var observer = new MutationObserver(function () {
      Array.prototype.forEach.call(container.getElementsByTagName('text'), function(annotation) {
        if ((annotation.getAttribute('text-anchor') === 'middle') &&
            (annotation.getAttribute('fill') === '#ffffff')) {
          var chartLayout = chart.getChartLayoutInterface();
          annotation.setAttribute('y',
            chartLayout.getYLocation(0) - (parseInt(annotation.getAttribute('font-size')) / 2)
          );
        }
      });
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });

    chart.draw(view, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="northPMChart"></div>

这篇关于移动 Google Chart 列注释位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！