javascript - 柱形图水平刻度的透明背景

Question

我有一个柱形图。我使用 'textPosition': 'in' 将 hAxis 的文本位置设置为 in。

它们显示为

当前文本背景为白色。我想让它透明。我该怎么办？

Answer 1

没有改变文字描边颜色的选项，
但您可以在图表的 '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>