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

Question

我是react新手，刚刚发现react-chattjs-2图形npm包。所以我在我的react项目中实现了这一点。现在我需要将网格线和轴的颜色更改为白色。所以我也尝试了两次这行代码。但它没有起作用。

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

我该怎么做？

提前谢谢。

Answer 1

您可以使用gridLines选项更改轴网颜色。在此处查找更多造型选项。

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>
);
}