javascript - 图表 js 背景颜色未显示
问题描述
在这里,我得到了 Chartjs 组件。它内部的逻辑有效,我可以看到 y 轴的数据和标签,但问题在于 xAxes 出于某种原因我看不到 xAxes(time) 和图表的背景颜色/边框颜色。我不知道问题出在哪里。如果有人能帮助我,我将不胜感激。
图表组件
const determineTimeFormat = (
timeFormat: string,
day: any,
week: any,
year: any
) => {
switch (timeFormat) {
case "24h":
return day;
case "7d":
return week;
case "1y":
return year;
default:
return day;
}
};
interface Props {
data: any
}
const ChartData: React.FC<Props> = ({ data }) => {
const chartCanvasRef = useRef<HTMLCanvasElement | null>(null);
const { day, week, year, detail } = data;
const [timeFormat, setTimeFormat] = useState("24h");
const [isRebuildingCanvas, setIsRebuildingCanvas] = useState(false);
useEffect(() => {
setIsRebuildingCanvas(true);
}, [timeFormat]);
useEffect(() => {
if (isRebuildingCanvas) {
setIsRebuildingCanvas(false);
}
}, [isRebuildingCanvas]);
useEffect(() => {
if (chartCanvasRef && chartCanvasRef.current && detail) {
const chartCanvas = chartCanvasRef.current
if (isRebuildingCanvas || !chartCanvas) {
return;
}
const chartInstance = new Chart(chartCanvasRef.current, {
type: "line",
data: {
datasets: [
{
label: `${detail.name} price`,
data: determineTimeFormat(timeFormat, day, week, year),
backgroundColor: 'rgba(134,159,152, 1)',
borderColor: "rgba(174, 305, 194, 0.4",
pointRadius: 0,
},
],
},
选项
options: {
lineHeightAnnotation: {
always: true,
hover: true,
lineWeight: 1.5,
},
animation: {
duration: 2000,
},
maintainAspectRatio: true,
responsive: true,
scales: {
x: [{
type: "time",
distribution: "linear"
},
],
},
},
解决方案
推荐阅读
- python - Python-如何只显示一次for循环?
- javascript - Bootstrap modal 没有从 JS 代码中第二次关闭
- php - 在 WooCommerce 3 中的特定运输方式下方添加一个复选框
- node.js - 在 NodeJS 中使用 do-while 循环检查 Firebase 数据库中是否存在
- c# - 替换字节数组中的多个字节
- stripe-payments - Stripe 托管的发票是否始终公开可见?有没有办法将其设为私有?
- javascript - 如何在javascript中的给定日期获得下个月的同一天(不是JQuery)
- reactjs - 滚动到一个位置并在本机反应中设置左右箭头
- react-native - React Native 配置返回错误 500,跟随 React Native Docs
- apache - 不要在ubuntu上重新启动apache2