如何修改Google Charts图表的标签颜色？

嘿，我来帮你搞定Google Charts里修改标签颜色的事儿！其实这个操作挺直观的，主要是通过配置图表的options参数来实现——不同类型的标签（坐标轴标签、图例标签、数据标签）调整方式略有不同，我给你拆解清楚：

不管是横轴（hAxis）还是纵轴（vAxis），都可以通过textStyle.color来设置标签颜色。直接看代码示例：

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  // 构造数据
  var data = google.visualization.arrayToDataTable([
    ['年份', '销量'],
    ['2020', 1000],
    ['2021', 1170],
    ['2022', 660],
    ['2023', 1030]
  ]);

  // 配置选项，重点看hAxis和vAxis的textStyle
  var options = {
    title: '年度销量统计',
    // 修改横轴标签颜色为红色
    hAxis: {
      textStyle: {
        color: '#ff0000',
        fontSize: 14 // 顺带调整字号，可选
      }
    },
    // 修改纵轴标签颜色为蓝色
    vAxis: {
      textStyle: {
        color: '#0066cc',
        fontSize: 14
      }
    }
  };

  // 渲染柱状图
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

图例的颜色配置单独放在legend.textStyle里，同样支持颜色值和字号调整：

// 在options里添加如下配置
legend: {
  textStyle: {
    color: '#888888', // 灰色图例标签
    fontSize: 12
  }
}

如果需要给每个数据点旁边的数值标签改颜色，要在series里配置dataLabelStyle：

// 在options里添加如下配置
series: {
  0: { // 这里的0代表第一个数据系列，如果有多个系列可以依次配置1、2...
    dataLabelStyle: {
      color: '#990099', // 紫色数据标签
      fontSize: 13
    }
  }
}

饼图的标签分两种：切片旁边的文本，以及图例文本。切片文本用pieSliceTextStyle，图例还是用legend.textStyle：

var options = {
  title: '市场份额占比',
  // 修改饼图切片旁的标签颜色为白色（适合深色背景）
  pieSliceTextStyle: {
    color: '#ffffff',
    fontSize: 14
  },
  // 修改饼图图例标签颜色
  legend: {
    textStyle: {
      color: '#333333'
    }
  }
};

小提示 #

颜色值可以用十六进制（#ff0000）、RGB（rgb(255,0,0)）、RGBA（rgba(255,0,0,0.8)）或者直接用颜色名称（red），根据你的需求选就行。

内容的提问来源于stack exchange，提问作者Ryosuke Yokota