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

问题描述

我正在使用Google Chart的柱形图.该图表是一个堆积的柱形图，其中包含对于堆积的列的每个数据点的注释.注释位于栏内部的顶部，但是我希望它们位于栏内部的中心.我找到的最接近的解决方案是将非堆叠式google图表的注释移到底部此处.

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解决了上述问题，但是当我使用某些注释值为null的另一列时，定位被抛出.

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

这是我尝试添加的新数据系列 ['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].

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.

推荐答案

与另一个问题类似，只需要一种方法即可找到注释.
在这里，我们使用text-anchor属性，假设它不是x轴标签.

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.

然后我们可以使用图表方法getChartLayoutInterface计算新头寸.

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