Googleグラフのx軸にスタイルを与える方法は？

Question

私はGoogleチャートを実装しており、X軸データにスタイルを与えたいと思います。私はこれを行う次のコードが見つかりました。

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

テキストデータに下線を引いてカーソルスタイルをポインタに変更したいとします。私はGoogleのチャートウェブサイトで検索したが、得られなかった。

Answer 1

あなたは'text-anchor'属性

x軸ラベルが値を持って使用して変更する軸ラベルを選択することができるとき'ready'イベントが発生chart

上のあなたは、直接
をtextの要素を変更することができます'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], 
 
     ['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>