диаграммы Google перемещают позицию аннотации в центр диаграммы с накоплением - PullRequest
Новая
       37

диаграммы Google перемещают позицию аннотации в центр диаграммы с накоплением

0 голосов
/ 26 октября 2018

Я использую столбчатую диаграмму Google Chart.Диаграмма представляет собой диаграмму с накоплением столбцов с аннотациями для каждой точки данных столбца с накоплением.Аннотации находятся в верхней части панели, но я бы хотел, чтобы они были в центре панели.Самым близким решением, которое я нашел, было перемещение аннотации гистограммы без столбцов в нижнюю строку здесь .

Проблема этого решения заключается в том, что код ищет белые аннотации и перемещает их вниз.График, над которым я работаю, имеет несколько цветов для аннотаций, и все аннотации этого цвета перемещаются к вершине по сравнению с центром подмножества столбца с накоплением. 

 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 решил вышеуказанную проблему, нокогда я другой столбец с некоторыми из значений аннотации как ноль, позиционирование сбрасывается.

вот новый ряд данных, который я пытался добавить ['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].

Идея состоит в том, чтобы иметь график, подобный приложенному изображению ниже, но с центрированными аннотациями.Ideal stacked graph without the text centred

1 Ответ

0 голосов
/ 26 октября 2018

аналогично другому вопросу, просто нужен способ найти аннотации.
здесь мы используем атрибут text-anchor, предполагая, что это не метка оси X.

тогда мы можем использовать метод диаграммы getChartLayoutInterface для расчета новой позиции.

см. Следующий рабочий фрагмент ... 

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>
...