如何为谷歌图表的x轴赋予样式？答案

【问题标题】：How to give style to x-axis of google charts?如何为谷歌图表的x轴赋予样式？
【发布时间】：2016-07-15 10:36:05
【问题描述】：

我正在实施谷歌图表，我想为 x 轴数据赋予样式。我在那里找到了以下代码来执行此操作。

hAxis:{
        title: 'Month',
        textStyle :{
                    fontSize : 10
        }
}

我想在文本数据下划线并将光标样式更改为指针。我在谷歌图表网站上搜索但没有得到。

【问题讨论】：

标签： charts google-visualization

【解决方案1】：

你可以直接修改text元素，
当'ready' 事件在chart 上触发时

您可以使用'text-anchor' 属性选择要修改的轴标签

x 轴标签的值为'middle'，y 轴'end'

请参阅以下工作 sn-p...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Category');
    data.addColumn('number', 'Value');
    data.addRows([
       ['Category A', 200],
       ['Category B', 110],
       ['Category D', 310],
       ['Category E', 280],
       ['Category F', 175]
    ]);
    var options = {
      hAxis: {
        textStyle: {
          fontSize : 10
        },
        title: 'Month'
      },
      height: 400,
      width: 600
    };

    var chartContainer = document.getElementById('chart_div');
    var chart = new google.visualization.ComboChart(chartContainer);

    google.visualization.events.addListener(chart, 'ready', function () {
      // modify x-axis labels
      var labels = chartContainer.getElementsByTagName('text');
      Array.prototype.forEach.call(labels, function(label) {
        if (label.getAttribute('text-anchor') === 'middle') {
          label.style.textDecoration = 'underline';
          label.style.cursor = 'pointer';
        }
      });
    });

    chart.draw(data, options);
  },
  packages: ['corechart']
});

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

【讨论】：

上面更改为组合图，它仍然有效。您可以使用浏览器的开发者工具来探索元素并找到唯一标识符。如果您可以分享图表的工作示例，也许可以提供帮助...