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

Question

I need to remove the border and the gridlines from the google charts timetable (see documentation )

Right now it looks like this: with borders
It should look like this: without borders

I made a stackblitz for it: https://stackblitz.com/edit/js-ozv5hr?file=index.html

It seems like the config options that you can use for example with line charts do not work with timelines.

Answer 1

there are no config options available for removing the borders,
but we can remove them manually on the chart's 'ready' event.

see following working snippet...

 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>