谷歌图表将注释位置移动到堆叠图表的中心 [英] google charts move annotation position to center of stacked chart

问题描述

我正在使用 Google Chart 的柱形图.该图表是一个堆积柱形图，为堆积柱形的每个数据点添加了注释.注释位于条形内部的顶部，但我希望它们位于条形内部的中心.我找到的最接近的解决方案是将非堆叠柱状谷歌图表的注释移动到底部

解决方案

类似其他问题，只是需要一个方法来找到注解.
在这里，我们使用 text-anchor 属性，假设它不是 x 轴标签.

然后我们可以使用图表方法getChartLayoutInterface来计算新的位置.

请参阅以下工作片段...

google.charts.load('current', {包:['corechart']}).then(函数 () {var 数据 = google.visualization.arrayToDataTable([['Range', 'score range A',{role: 'style'},{ role: 'annotation' }, 'score range B',{role: 'style'},{ role: 'annotation' }, '分数范围 C'，{角色:'样式'}，{角色:'注释'}，'分数范围 D'，{角色:'样式'}，{角色:'注释'}]，['范围', 4,'#D7F0B4','0-4',6,'#00B050','5-10',9,'#92D050','11-19',6, '#AAE182','20-25']]);变量选项 = {vAxis:{刻度:[0,4,10,19]，viewWindow:{最大:25}}，isStacked: 真的,标题:'分数'，图例:{位置:'无'}};var container = document.getElementById('idealchartA');var chart = new google.visualization.ColumnChart(container);google.visualization.events.addListener(chart, 'ready', function () {var observer = new MutationObserver(moveAnnotations);观察者.观察(容器，{子列表:真，子树:真});});功能移动注释(){var chartLayout = chart.getChartLayoutInterface();var barBounds;变量标签边界；变量 yAdj;var 标签 = container.getElementsByTagName('text');变量索引 = 0;Array.prototype.forEach.call(labels, function(label) {if ((label.getAttribute('text-anchor') === 'middle') && (label.textContent !== data.getValue(0, 0))) {barBounds = chartLayout.getBoundingBox('bar#' + index + '#0');labelBounds = chartLayout.getBoundingBox('annotationtext#' + index + '#0#0');yAdj = (barBounds.height/2) + (parseFloat(label.getAttribute('font-size'))/2) - 2;label.setAttribute('y', barBounds.top + yAdj);索引++；}});}chart.draw(数据，选项)；});

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

I am using Google Chart's column graph chart. The chart is a stacked column chart with annotations for every data point of the stacked column. The annotation are at the top of the inside of the bar but I would like them to be centred inside of the bar. The closest solution I found was moving the annotation of a non stacked column google chart to the bottom here.

The problem with this solution is that the code looks for annotation that are white and moves them to the bottom. The graph I am working on has multiple colours for the annotations and all the annotation of that colour move to the top vs the centre of the subset of the stacked column.

 google.charts.setOnLoadCallback(drawChart);
    function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Range', 'score range A',{role: 'style'},{ role: 'annotation' }, 'score range B',{role: 'style'},{ role: 'annotation' }, 'score range C', {role: 'style'},{ role: 'annotation' },'score range D', {role: 'style'},{ role: 'annotation' }],
      ['Range', 4,'#D7F0B4','0-4',6,'#00B050','5-10',9,'#92D050','11-19',6, '#AAE182','20-25']
    ]);

    var options = {
      vAxis:{ ticks: [0,4,10,19], viewWindow: { max: 25} },
      isStacked: true,
      title: 'Score',
      legend: {position: 'none'}
    };

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

    chart.draw(data, options);
  }

@Whitehat solved the above problem but when I another column with some of the annotation values as null the positioning gets thrown off.

here is the new data series I tried to add ['Range', 4,'#D7F0B4','0-4',6,'#00B050','5-10',9,'#92D050','11-19',6, '#AAE182','20-25'], ['Yours', 4,'white; fill-opacity: 0',null,6, '#00B050',10, 9,'white; fill-opacity: 0',null,6,'white; fill-opacity: 0',null].

The idea is to have a graph like the attached image below but with the annotations centred.

解决方案

similar to the other question, just need to a way to find the annotations.
here, we use the text-anchor attribute, assuming it isn't the x-axis label.

then we can use chart method getChartLayoutInterface to calculate the new position.

see following working snippet...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Range', 'score range A',{role: 'style'},{ role: 'annotation' }, 'score range B',{role: 'style'},{ role: 'annotation' }, 'score range C', {role: 'style'},{ role: 'annotation' },'score range D', {role: 'style'},{ role: 'annotation' }],
    ['Range', 4,'#D7F0B4','0-4',6,'#00B050','5-10',9,'#92D050','11-19',6, '#AAE182','20-25']
  ]);

  var options = {
    vAxis:{ ticks: [0,4,10,19], viewWindow: { max: 25} },
    isStacked: true,
    title: 'Score',
    legend: {position: 'none'}
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    var observer = new MutationObserver(moveAnnotations);
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

  function moveAnnotations() {
    var chartLayout = chart.getChartLayoutInterface();
    var barBounds;
    var labelBounds;
    var yAdj;

    var labels = container.getElementsByTagName('text');
    var index = 0;
    Array.prototype.forEach.call(labels, function(label) {
      if ((label.getAttribute('text-anchor') === 'middle') && (label.textContent !== data.getValue(0, 0))) {
        barBounds = chartLayout.getBoundingBox('bar#' + index + '#0');
        labelBounds = chartLayout.getBoundingBox('annotationtext#' + index + '#0#0');
        yAdj = (barBounds.height / 2) + (parseFloat(label.getAttribute('font-size')) / 2) - 2;
        label.setAttribute('y', barBounds.top + yAdj);
        index++;
      }
    });
  }

  chart.draw(data, options);
});

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

这篇关于谷歌图表将注释位置移动到堆叠图表的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！