如何在 react 中使用 chartkick.js 设置轴标签颜色？答案

【问题标题】：How to set axis label color using chartkick.js in react?如何在 react 中使用 chartkick.js 设置轴标签颜色？
【发布时间】：2020-04-06 16:17:02
【问题描述】：

如果我在这样的反应组件中有柱形图组件：

import React from "react";
import {ColumnChart} from "react-chartkick";

export function BarChart({data, title, xlabel, ylabel}) {
  const classes = useStyles();
  return (
    <div className={classes.dataVisualisation}>
      <div className={classes.title} >{title}</div>
      <ColumnChart
        data={data}
        xtitle={xlabel}
        ytitle={ylabel}
      />
    </div>
  );
}

如何指定标签文本的颜色？

【问题讨论】：

标签： javascript reactjs jsx chartkick

【解决方案1】：

嗯，这有点深。

我们可以在chartkick

的文档中找到这些东西

库 > 图例 > 标签 > 字体颜色

库 > 刻度 > yAxes/xAxes > gridLines (?) > 颜色

import Chartkick, { LineChart } from "react-chartkick";
import "chart.js";

<LineChart
  data={{ "2017-01-01": 11, "2017-01-02": 6, "2017-01-03": 20 }}
  library={{
    legend: {
      labels: {
        fontColor: "blue"
      }
    },
    scales: {
      xAxes: [
        {
          ticks: { fontColor: "blue" },
          gridLines: { drawBorder: true, color: "blue" }
        }
      ]
    }
  }}
/>

【讨论】：

这适用于为刻度着色，但我如何设置标签颜色呢？例如如果我有 x 轴的标签“日期”，我将如何将其设置为绿色。
是的，它会改变轴刻度和网格线的颜色，就像在您的图像中所做的那样，但标签的颜色保持不变。
它们对我来说仍然是相同的颜色

【解决方案2】：

根据 Keikai 的回答，我得到了它的工作。

设置标签颜色的属性是：

库 > 刻度 > yAxes/xAxes > scaleLabel > fontColor

import Chartkick, { LineChart } from "react-chartkick";
import "chart.js";

<LineChart
  data={{ "2017-01-01": 11, "2017-01-02": 6, "2017-01-03": 20 }}
  library={{
    legend: {
      labels: {
        fontColor: "blue"
      }
    },
    scales: {
      xAxes: [
        {
          scaleLabel: { fontColor: "blue" }, // this line sets the label's font to blue
          ticks: { fontColor: "blue" },
          gridLines: { drawBorder: true, color: "blue" }
        }
      ]
    }
  }}
/>

【讨论】：