Google 차트의 x 축에 스타일을 지정하는 방법은 무엇입니까?

Question

Google 차트를 구현 중이며 x 축 데이터에 스타일을 적용하고 싶습니다. 나는 이것을하기 위해 다음 코드를 발견했다.

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

텍스트 데이터에 밑줄을 긋고 커서 스타일을 포인터로 변경하려고합니다. 나는 Google 차트 웹 사이트에서 검색했지만 얻지 못했습니다.

Answer 1

직접 text 요소를 수정할 수
때 chart

에 'ready' 이벤트가 발생하면

x 축 레이블 값을 가지고있는 'text-anchor' 속성을 사용하여 수정하는 축 레이블을 선택할 수 있습니다 'middle', 'end'

작업 조각에 따라 참조 Y 축 ...

의

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>