如何在 react-chartjs-2

问题描述

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

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

defaults.global.defaultColor='rgba(255,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,"rgba(255,206,86,"rgba(75,192,"rgba(153,102,255,159,64,0.2)"
      ],borderColor: [
        "rgba(255,1)",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>
  );
}