如何在 react-chartjs-2 中更改图形网格和轴颜色

Question

我是 React 新手，刚刚发现 react-chartjs-2 绘图 npm 包。所以我在我的 React 项目中实现了这个。现在我需要将网格线和轴颜色更改为白色。所以我在两个 times.But 中也尝试了这行两行代码，它没有用。

defaults.global.defaultColor='rgba(255,255,255,1)'

defaults.global.defaultColor='rgba(255,255,255,1)'

我该怎么做？

提前致谢。

Answer 1

您可以使用 gridLines 选项更改轴网格颜色。查找更多样式选项 here。

import React from "react";
import "./style.css";
import { Bar } from "react-chartjs-2";

const data = {
  labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  datasets: [
    {
      label: "# of Votes",
      data: [12, 19, 13, 15, 12, 13],
      backgroundColor: [
        "rgba(255, 99, 132, 0.2)",
        "rgba(54, 162, 235, 0.2)",
        "rgba(255, 206, 86, 0.2)",
        "rgba(75, 192, 192, 0.2)",
        "rgba(153, 102, 255, 0.2)",
        "rgba(255, 159, 64, 0.2)"
      ],
      borderColor: [
        "rgba(255, 99, 132, 1)",
        "rgba(54, 162, 235, 1)",
        "rgba(255, 206, 86, 1)",
        "rgba(75, 192, 192, 1)",
        "rgba(153, 102, 255, 1)",
        "rgba(255, 159, 64, 1)"
      ],
      borderWidth: 1
    }
  ]
};

const options = {
  scales: {
    yAxes: [
      {
        gridLines: {
          color: "red"
        }
      }
    ],
    xAxes: [
      {
        gridLines: {
          color: "blue"
        }
      }
    ]
  }
};

export default function App() {
  return (
    <div>
      <Bar data={data} options={options} />
    </div>
  );
}

如何在 react-chartjs-2 中更改图形网格和轴颜色

How to change graph grid and axis colors in react-chartjs-2

reactjs

react-chartjs-2