删除谷歌图表时间线周围的边框和网格线

问题描述

我需要从谷歌图表时间表中删除边框和网格线（参见 documentation）

现在看起来像这样：with borders
它应该是这样的：without borders

我为它做了一个stackblitz：https://stackblitz.com/edit/js-ozv5hr?file=index.html

您可以使用例如折线图的配置选项似乎不适用于时间线。

解决方法

没有可用于去除边框的配置选项，
但我们可以在图表的 'ready' 事件中手动删除它们。

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

google.charts.load("current",{
  packages: ["timeline"]
}).then(function () {
  var container = document.getElementById("timeline");
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: "string",id: "Label" });
  dataTable.addColumn({ type: "string",id: "Type" });
  dataTable.addColumn({ type: "date",id: "Start" });
  dataTable.addColumn({ type: "date",id: "End" });
  dataTable.addRows([
    ["A","A",new Date(2021,0),1)],["A","B",1),2)],"C",2),3)]
  ]);

  var options = {
    timeline: {
      groupByRowLabel: true,showRowLabels: false,showBarLabels: false
    },avoidOverlappingGridLines: false,hAxis: {
      format: "HH:mm"
    },gridlines: {
      color: "none"
    }
  };

  google.visualization.events.addListener(chart,'ready',function () {
    // find <rect> elements
    var rects = container.getElementsByTagName('rect');
    Array.prototype.forEach.call(rects,function(rect) {
      if (rect.getAttribute('stroke') === '#9a9a9a') {
        // remove border
        rect.setAttribute('stroke-width','0');
      }
    });

    // find <path> elements
    var paths = container.getElementsByTagName('path');
    Array.prototype.forEach.call(paths,function(path) {
      if ((path.getAttribute('stroke') === '#ffffff') || (path.getAttribute('stroke') === '#e6e6e6')) {
        // remove border
        path.setAttribute('stroke-width','0');
      }
    });
  });

  chart.draw(dataTable,options);
});

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