Google 图表时间轴 - 更改 hAxis 文本颜色

Question

我正在尝试自定义时间轴图表上的

hAxis

文本颜色，但我找不到正确的参数。或者如果这对于 CSS 是可行的，我也会很高兴。

我已经尝试过

textStyle: { color: 'white' }

但这没有效果。有什么想法吗？

body {
  background-color: #555;
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {
    packages: ["timeline"]
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    var container = document.getElementById('example');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({
      type: 'string',
      id: 'Resource'
    });
    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([
      ['R1', 'Event 1', 'red', new Date('April 8, 2024 08:30:00'), new Date('April 8, 2024 09:30:00')],
      ['R1', 'Event 2', 'red', new Date('April 8, 2024 09:45:00'), new Date('April 8, 2024 10:15:00')]
    ]);

    chart.draw(dataTable, {
      hAxis: {
        textStyle: {
          color: 'white' // Does not work
        },
        format: 'HH:mm',
        minValue: new Date('April 8, 2024 07:30:00'),
        maxValue: new Date('April 8, 2024 18:30:00')
      }
    });
  }
</script>

<div id="example"></div>

Answer 1

您可以使用以下CSS选择器
请注意 svg 元素使用

fill

#example text[text-anchor="middle"] {
  fill: #ffffff;
}

请参阅以下片段...

body {
  background-color: #555;
}

#example text[text-anchor="middle"] {
  fill: #ffffff;
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {
    packages: ["timeline"]
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    var container = document.getElementById('example');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({
      type: 'string',
      id: 'Resource'
    });
    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([
      ['R1', 'Event 1', 'red', new Date('April 8, 2024 08:30:00'), new Date('April 8, 2024 09:30:00')],
      ['R1', 'Event 2', 'red', new Date('April 8, 2024 09:45:00'), new Date('April 8, 2024 10:15:00')]
    ]);

    chart.draw(dataTable, {
      hAxis: {
        format: 'HH:mm',
        minValue: new Date('April 8, 2024 07:30:00'),
        maxValue: new Date('April 8, 2024 18:30:00')
      }
    });
  }
</script>

<div id="example"></div>