React Google Charts坐标轴及文本颜色无法修改问题求助

你的问题出在使用了Material类型的Bar图表，这类图表的配置项和经典Google Charts结构不同，导致原配置无法生效。以下是修正后的代码，包含轴文本颜色、轴线条颜色、网格线颜色以及图表背景色的正确配置：

import React from "react";
import { Chart } from "react-google-charts";

const BarChart = () => {
  const data = [
    ["Year", "Sales"],
    ["2014", 1000],
    ["2015", 1170],
    ["2016", 660],
    ["2017", 1030],
  ];

  const options = {
    chart: {
      title: "Company Performance",
      subtitle: "Sales, Expenses, and Profit: 2014-2017",
    },
    colors: ["#895d85"], // 柱状图颜色，正常生效
    backgroundColor: "#f5f5f5", // 图表背景色
    axes: {
      x: {
        0: {
          title: "Total Population",
          textStyle: { color: "blue" }, // X轴文本颜色
          baselineColor: "#895d85", // X轴基线颜色
          gridlines: { color: "#895d85" }, // X轴网格线颜色
        },
      },
      y: {
        0: {
          title: "City",
          textStyle: { color: "green" }, // Y轴文本颜色
          baselineColor: "#895d85", // Y轴基线颜色
        },
      },
    },
  };

  return (
    <Chart
      chartType="Bar"
      width="100%"
      height="400px"
      data={data}
      options={options}
    />
  );
};

export default BarChart;

关键修改说明 #

• 图表背景色：直接在options根节点添加backgroundColor配置，支持十六进制颜色值或RGB/RGBA格式。
• 轴样式配置：Material类型图表的轴样式需要嵌套在axes对象下，通过x[0]和y[0]分别指定X、Y轴的配置，包含textStyle（文本颜色）、baselineColor（轴线条颜色）、gridlines.color（网格线颜色）等属性。
• 原配置中的hAxis、vAxis是经典Google Charts的配置项，不适用于Material类型的Bar图表，因此无法生效。

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