更改 Google 可视化时间线中的条形颜色/描边

Question

我正在尝试更改每个栏的边框，使其可见。我正在使用

{ type: 'string', id: 'style', role: 'style' }

自定义每个栏的样式。

我已经能够更新条形颜色（例如：

color: lightyellow;

），但无法弄清楚如何更改边框/描边。我尝试将其添加到样式中，但它不起作用，

stroke: rgb(0, 0, 0);

）

有人知道如何更新边框吗？

一如既往的感谢！

  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.6');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', "color: lightyellow; stroke: rgb(0, 0, 0);", new Date(1789, 3, 30), new Date(1797, 2, 4)],
      [ 'President', 'John Adams', "color: lightgreen; stroke: rgb(0, 0, 0);", new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', "color: lightblue; stroke: rgb(0, 0, 0);", new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    chart.draw(dataTable);
  }

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example5.6" style="height: 150px;"></div>

Answer 1

使用

stroke-color

"color: lightyellow; stroke-color: rgb(0, 0, 0);"

您可以在列角色参考页面上找到可用属性...

google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.6');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', "color: lightyellow; stroke-color: rgb(0, 0, 0);", new Date(1789, 3, 30), new Date(1797, 2, 4)],
      [ 'President', 'John Adams', "color: lightgreen; stroke-color: rgb(0, 0, 0);", new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', "color: lightblue; stroke-color: rgb(0, 0, 0);", new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    chart.draw(dataTable);
  }

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example5.6" style="height: 150px;"></div>