条形图背景操作

Question

我正在尝试使用“斑马线”背景实现条形图，而不是使用Google图表来设置默认的网格线。

有没有办法做到这一点？到目前为止还不知道如何。

这是我要实现的目标：

这是到目前为止我得到的：

Answer 1

没有配置选项可用于更改网格线的宽度。

但是，您可以在图表的'ready'事件上手动进行更改。

请参阅以下工作片段...

此处，次网格线被移动以与轴标签对齐。
并将宽度增加到下一个轴标签的位置。

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['X', 'Y'],
    ['school_score', 80],
    ['salary_score', 72],
    ['benefits_score', 50],
    ['work_environment', 42],
    ['security_score', 35]
  ]);

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

  google.visualization.events.addListener(chart, 'ready', function () {
    // find gridlines
    var gridlines = container.getElementsByTagName('rect');
    var minor = [];
    Array.prototype.forEach.call(gridlines, function(gridline) {
      if ((gridline.getAttribute('width') === '1') && (gridline.getAttribute('fill') === '#ebebeb')) {
        minor.push(gridline);
      }
    });

    // increase width of every other minor gridline, make the rest transparent
    var index = 0;
    var labelBounds;
    var labelBoundsNext;
    var chartLayout = chart.getChartLayoutInterface();
    while ((labelBounds !== null) && (index < minor.length)) {
      if (index % 2 === 0) {
        // use axis label bounds to determine width
        labelBounds = chartLayout.getBoundingBox('hAxis#0#label#' + index);
        labelBoundsNext = chartLayout.getBoundingBox('hAxis#0#label#' + (index + 1));
        minor[index].setAttribute('x', labelBounds.left);
        minor[index].setAttribute('width', (labelBoundsNext.left - labelBounds.left + labelBounds.width));
      } else {
        minor[index].setAttribute('fill', 'transparent');
      }
      index++;
    }
  });

  chart.draw(data);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>