移除 google 图表时间轴周围的边框和网格线

Question

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

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

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

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

Answer 1

没有可用于删除边框的配置选项，
但我们可以在图表的 '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, 0, 0), new Date(2021, 0, 0, 1)],
    ["A", "B", new Date(2021, 0, 0, 1), new Date(2021, 0, 0, 2)],
    ["A", "C", new Date(2021, 0, 0, 2), new Date(2021, 0, 0, 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>

移除 google 图表时间轴周围的边框和网格线

Remove borders and gridlines around google chart timeline

javascript

charts

google-visualization

timeline