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

问题描述

我使用下面的代码生成列图中的柱形图，但我真的很喜欢它们被定位在柱的底部而不是顶部。

以下是我拥有的图表视图：

$ b $

  var data = google.visualization.arrayToDataTable（[
 ['Type'，'Completed'，'Outstanding']，
 ['项目1'，75,25]，
 ['项目2'，50,40]，
 ['项目3'，80,15] 
]）; 
 
 var view = new google.visualization.DataView（data）; 
 view.setColumns（[0，1，
 {
 calc：stringify，
 sourceColumn：1，
 type：string，
角色：注释
}，
 2，
 {
 calc：stringify，
 sourceColumn：2，
类型：string， 
角色：注释
}]）; 
 
 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）; 
  

非常感谢任何帮助。

解决方案

没有标准的配置您可以调整 annotations.stem.length 进行调整，以便将注释移至底部

默认位置

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

这在这里不起作用

---

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

$ b但是，使用 getImageURI ，

时，如果您需要生成图表的png图像，则不会反映自定义修改 p>

此外，图表会将注释移回到其原始位置，

随时有交互，例如列悬停

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

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

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);

Any help much appreciated.

解决方案

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

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

but this will move all the annotations the same distance,

which would not work here

---

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

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

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屋！