Хотите повысить визуальную привлекательность своих диаграмм Google? Одним из важнейших аспектов, который следует учитывать, является размер шрифта по горизонтальной оси (HAxis). Регулируя размер шрифта, вы можете улучшить читаемость и сделать диаграммы еще более впечатляющими. В этой статье мы рассмотрим различные методы настройки размера шрифта HAxis в Google Charts с примерами кода. Итак, приступим!

Метод 1: использование параметра конфигурации hAxis

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2016', 1000, 400],
    ['2017', 1170, 460],
    ['2018', 660, 1120],
    ['2019', 1030, 540]
  ]);
  var options = {
    hAxis: {
      textStyle: {
        fontSize: 14 // Adjust the font size as desired
      }
    }
  };
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

Метод 2. Использование стилей CSS

<style>
  #chart_div svg g text[text-anchor="middle"] {
    font-size: 14px; /* Adjust the font size as desired */
  }
</style>
<div id="chart_div"></div>
<script>
  google.charts.load('current', {packages: ['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2016', 1000, 400],
      ['2017', 1170, 460],
      ['2018', 660, 1120],
      ['2019', 1030, 540]
    ]);
    var options = {};
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

Метод 3. Динамическая настройка размера шрифта

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2016', 1000, 400],
    ['2017', 1170, 460],
    ['2018', 660, 1120],
    ['2019', 1030, 540]
  ]);
  var options = {};
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
  var chartContainer = document.getElementById('chart_div');
  var hAxisTextElements = chartContainer.getElementsByTagName('text');
  var desiredFontSize = 14; // Adjust the font size as desired
  for (var i = 0; i < hAxisTextElements.length; i++) {
    hAxisTextElements[i].setAttribute('font-size', desiredFontSize);
  }
}

Теперь, когда вы изучили несколько способов настройки размера шрифта HAxis в Google Charts, не стесняйтесь экспериментировать и выбирать тот, который лучше всего соответствует вашим потребностям. Повышение читаемости и визуальной привлекательности ваших диаграмм, несомненно, сделает ваши данные более доступными и эффективными. Удачного построения графиков!