Как придать стиль х-оси диаграмм Google?

Question

Я использую диаграммы Google, и я хочу дать стиль х-осям данных. Я нашел для этого следующий код.

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

Я хочу подчеркнуть текстовые данные и изменить стиль курсора на указатель. Я искал на веб-сайте google chart, но не получил.

Answer 1

вы можете модифицировать text элементы прямо,
когда 'ready' срабатывает событие на chart

вы можете выбрать, какая ось метки, чтобы изменить с помощью атрибута 'text-anchor'

х-метки оси имеют значение из 'middle', ось у '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>