прозрачный фон для горизонтальных отметок гистограммы - PullRequest
Новая
       55

прозрачный фон для горизонтальных отметок гистограммы

1 голос
/ 14 октября 2019

У меня есть столбчатая диаграмма. Я устанавливаю текстовую позицию hAxis, используя 'textPosition': 'in'.

Они отображаются как enter image description here

В настоящее время текстовый фон имеет белый цвет. Я хочу сделать это прозрачным. Как я могу?

1 Ответ

1 голос
/ 15 октября 2019

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

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

здесь используется атрибут 'text-anchor',
см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Year');
  data.addColumn('number', 'y0');
  data.addColumn('number', 'y1');
  data.addColumn('number', 'y2');
  data.addRows([
    [2010, 1000, 100, 1200],
    [2020, 1000, 100, 1200],
    [2030, 1000, 100, 1200]
  ]);

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

  google.visualization.events.addListener(chart, 'ready', function () {
    // find labels, remove stroke
    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      if (label.getAttribute('text-anchor') === 'end') {
        label.setAttribute('stroke', 'none');
        label.setAttribute('stroke-width', '0');
      }
    });
  });

  chart.draw(data, {
    hAxis: {
      format: '0000',
      textPosition: 'in'
    }
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
...