Google ColumnChart - как переместить текст аннотации по горизонтали за пределы области диаграммы и предотвратить наложение - PullRequest
Новая
       11

Google ColumnChart - как переместить текст аннотации по горизонтали за пределы области диаграммы и предотвратить наложение

1 голос
/ 06 ноября 2019

У меня есть столбчатая диаграмма, которая выглядит следующим образом. Проблема в том, что аннотация Growth Target (41) перекрывает планку.

enter image description here

Мне нужно следующее. Как я могу сделать это? Я уменьшил ширину chartArea до 80%, чтобы создать свободное пространство справа от нее, но не знаю, как переместить аннотацию туда и разбить ее на две строки.

enter image description here

1 Ответ

0 голосов
/ 13 ноября 2019

Что касается размещения аннотации, решения great не существует.
, но мы можем добавить пустую строку в таблицу данных, чтобы освободить место для аннотации справа. 

['Oct-19', 65, '65', null, 41, null],
['Nov-19', 65, '65', '#388e3c', 41, null],
['Dec-19', 65, '65', '#388e3c', 41, null],
['', null, null, null, 41, 'Growth Target: (41)']  // <-- add blank row

однако, это будет работать только в том случае, если график достаточно большой, в общем размере.

что касается переноса столбцов на передний план,
нам потребуется изменить диаграмму вручную для события 'ready' диаграммы.
мы можем добавить элемент <use>. в основном, мы присваиваем id каждому столбцу.
, а затем связываем столбец с элементом <use>.
, что приводит к тому, что столбец находится сверху.

но это также вызывает проблемы с аннотациями и всплывающими подсказками.
и у меня не было времени выяснить, почему.

см. Следующий рабочий фрагмент ...
(при запуске фрагмента щелкните ссылку на всю страницу в верхней части окна фрагмента) 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y', {role: 'annotation', type: 'string'}, {role: 'style', type: 'string'}, 'target', {role: 'annotation', type: 'string'}],
    ['Apr-19', 28, '28', null, 41, null],
    ['May-19', 29, '29', null, 41, null],
    ['Jun-19', 22, '22', null, 41, null],
    ['Jul-19', 36, '36', null, 41, null],
    ['Aug-19', 40, '40', null, 41, null],
    ['Sep-19', 37, '37', null, 41, null],
    ['Oct-19', 65, '65', null, 41, null],
    ['Nov-19', 65, '65', '#388e3c', 41, null],
    ['Dec-19', 65, '65', '#388e3c', 41, null],
    ['', null, null, null, 41, 'Growth Target: (41)']
  ]);

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

  var options = {
    colors: ['#bdbdbd', '#757575'],
    hAxis: {
      title: 'MONTH'
    },
    height: 400,
    legend: 'none',
    series: {
      1: {
        annotations: {
          stem: {
            color: 'transparent'
          },
          textStyle: {
            color: '#757575'
          }
        },
        type: 'line'
      }
    },
    seriesType: 'bars',
    vAxis: {
      title: 'SALES UNITS'
    }
  };

  google.visualization.events.addListener(chart, 'ready', function () {
    // get svg namespace
    var svg = container.getElementsByTagName('svg')[0];
    var svgNS = svg.namespaceURI;
    var rects = container.getElementsByTagName('rect');
    Array.prototype.forEach.call(rects, function(rect, index) {
      if ((rect.getAttribute('fill') === '#bdbdbd') || (rect.getAttribute('fill') === '#388e3c')) {
        rect.setAttribute('id', 'rect-' + index);
        var link = document.createElementNS(svgNS, 'use');
        link.setAttribute('href', '#rect-' + index);
        svg.appendChild(link);
      }
    });
  });

  chart.draw(data, options);
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
...