谷歌图表 haxis 字体大小 - TypeScript 主题介绍

本篇将为开发人员介绍如何在谷歌图表中更改水平轴（haxis）的字体大小。本示例使用TypeScript语言编写。

在谷歌图表中，可以通过修改配置选项来设置水平轴的字体大小。以下是如何实现的示例代码片段：

// 引入谷歌图表库
import { google } from 'google-charts';

// 在DOM加载完成后调用此函数
function drawChart() {
  // 创建图表数据
  const data = new google.visualization.DataTable();
  data.addColumn('string', '年份');
  data.addColumn('number', '销售额');
  data.addRows([
    ['2017', 1000],
    ['2018', 1500],
    ['2019', 2000],
    ['2020', 2500],
  ]);

  // 创建图表选项
  const options = {
    hAxis: {
      title: '年份',
      titleTextStyle: { fontSize: 20 },
      textStyle: { fontSize: 16 },
    },
    vAxis: {
      title: '销售额',
    },
  };

  // 创建图表实例
  const chart = new google.visualization.ColumnChart(document.getElementById('chart-container'));

  // 绘制图表
  chart.draw(data, options);
}

// 加载谷歌图表库并设置回调函数
google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawChart);

在上述代码中，我们首先导入谷歌图表库，并在页面加载完成后调用 drawChart 函数。该函数创建一个包含销售额数据的 DataTable，然后设置图表的选项。

在选项中，我们使用 hAxis 属性来设置水平轴的标题和字体大小。titleTextStyle 属性用于设置轴标题的字体大小，textStyle 属性用于设置轴刻度标签的字体大小。在此示例中，我们将标题字体大小设置为 20px，刻度标签字体大小设置为 16px。

最后，我们通过创建 ColumnChart 实例并传入数据和选项来绘制图表。

请注意，为了能够运行此代码，您需要在 HTML 文件中添加一个具有 id="chart-container" 的元素，作为图表的容器。

希望本篇主题能够帮助您在谷歌图表中更改水平轴的字体大小。如需了解更多信息，请参阅 谷歌图表官方文档。

以上是本次的介绍，如有疑问，请随时提问。