Хотите добавить верхний отступ для текста аннотации в гистограмме в Google Chart (Визуализация) - PullRequest
Новая
       33

Хотите добавить верхний отступ для текста аннотации в гистограмме в Google Chart (Визуализация)

0 голосов
/ 13 сентября 2018

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

Вот мой код: 

var data = google.visualization.arrayToDataTable([
                [USER_AVERAGE, 'User Average', { role: 'style' }],
                ['SANDRA COOMBS', 8.6, '#008FBE'],
                ['STEVE ADAMS', 4.3, '#008FBE'],
            ]);

            var view = new google.visualization.DataView(data);
            view.setColumns([0, 1, 2,
                {
                    calc: "stringify",
                    sourceColumn: 1,
                    type: "string",
                    role: "annotation"
                }]);
            var options = {
                legend: {
                    position: 'none'
                },
                chartArea: { width: width, height: height, right: right },
                isStacked: true,
                orientation: orientation.orientation,
                fontSize: '12',
                fontName: 'OpenSans-Regular',
                hAxis: {
                    viewWindowMode: 'maximized',
                },
                vAxis: {
                    viewWindowMode: 'maximized',
                },
                animation: {
                    startup: true,
                    duration: 1500,
                    easing: 'out',
                },
            };
            var chart = new google.visualization.ColumnChart(document.getElementById("averageDaysChart"));
            chart.draw(view.toDataTable(), options);

1 Ответ

0 голосов
/ 13 сентября 2018

нет параметров конфигурации для заполнения, положения и т. Д. Аннотаций ...

однако вы можете переместить их вручную на 'animationfinish' событие диаграммы
, но MutationObserver необходимо
, потому что диаграмма переместит их обратно на интерактивность,
, например, при наведении курсора на столбец.

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
      ['USER_AVERAGE', 'User Average', { role: 'style' }],
      ['SANDRA COOMBS', 8.6, '#008FBE'],
      ['STEVE ADAMS', 4.3, '#008FBE'],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, 2,
      {
          calc: "stringify",
          sourceColumn: 1,
          type: "string",
          role: "annotation"
      }]);
  var options = {
      legend: {
          position: 'none'
      },
      //chartArea: { width: width, height: height, right: right },
      isStacked: true,
      //orientation: orientation.orientation,
      fontSize: '12',
      fontName: 'OpenSans-Regular',
      hAxis: {
          viewWindowMode: 'maximized',
      },
      vAxis: {
          viewWindowMode: 'maximized',
      },
      animation: {
          startup: true,
          duration: 1500,
          easing: 'out',
      },
  };

  var container = document.getElementById("averageDaysChart");
  var chart = new google.visualization.ColumnChart(container);

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

  var originalY = {};
  function moveAnnotations() {
    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      if ((!isNaN(parseFloat(label.textContent))) && (label.getAttribute('text-anchor') === 'middle')) {
        if (!originalY.hasOwnProperty(label.textContent)) {
          originalY[label.textContent] = parseFloat(label.getAttribute('y'));
        }
        label.setAttribute('y', originalY[label.textContent] + 20);
      }
    });
  }

  chart.draw(view.toDataTable(), options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="averageDaysChart"></div>
...