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

Question

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

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