javascript - 如何在 react 中使用 chartkick.js 设置轴标签颜色?
问题描述
如果我在反应组件中有一个柱形图组件,如下所示:
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>
);
}
如何指定标签文本的颜色?
解决方案
嗯,有点深。
我们可以在chartkick的文档中找到这些东西
库 > 图例 > 标签 > fontColor
图书馆 > 尺度 > 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" }
}
]
}
}}
/>
推荐阅读
- php - Symfony 4 access_control 不按角色工作
- java - java - Native.loadLibrary 适用于 OpenJDK 错误而不适用于 Oracle JDK
- php - POST url参数理解
- ios - 解析登录错误域=解析代码=209“无效会话令牌”
- javascript - 我在发送 SOAP 请求时遇到内部服务器错误 500
- c# - 从elasticsearch中的管道分隔字符串中过滤
- javascript - 尽管数组填充了值,但值未定义
- python-3.x - 在菜单上安装 Anaconda 不够
- mysql - MySQL 排序规则:utf8mb4_unicode_ci 与“utf8mb4 - 默认排序规则”
- rabbitmq - 如何在nodejs中验证rabbitmq?