如何给谷歌图表的X轴风格？ [英] How to give style to x-axis of google charts?

问题描述

我正在实施谷歌图表，我想给x轴数据添加样式。

  hAxis：{
 title：'Month'，
 textStyle：{
 fontSize：10 
} 
} 
  

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

/ code>元素，
$ 'ready'事件触发图表

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

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

请参阅以下工作片段...

  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]，['类别D'，310]，['类别E'，280]，['类别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（）{//修改x轴标签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（数据，选项）; }，packages：['corechart']}）;   
 

I am implementing google charts and I want to give style to x-axis data. I found there the following code to do this.

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

I want to underline the text data and change cursor style to the pointer. I searched on the google chart website but didn't get.

解决方案

you can modify the text elements directly,
when the 'ready' event fires on the chart

you can select which axis labels to modify by using the 'text-anchor' attribute

x-axis labels have a value of 'middle', y-axis 'end'

see following working snippet...

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>

这篇关于如何给谷歌图表的X轴风格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！