我正在使用react-chattjs-2构建折线图,我在选项道具中指定的选项都不起作用。
这是我的代码:
import React, { useState, useEffect } from "react";
// import Chart from "chart.js";
import { Line } from "react-chartjs-2";
import moment from "moment";
export default function CardLineChartRN(props) {
const [deviceMsgs, setDeviceMsgs] = useState(null);
useEffect(() => {
getMsg();
}, []);
const getMsg = async () => {
// To get Today's data
const todaysDate = moment().format("YYYY-MM-DD");
try {
const response = await fetch("http://localhost:8000/APICALL", {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
// Authorization: `Bearer ${auth.token}`,
},
body: JSON.stringify({
name: props.name,
date: todaysDate,
}),
});
const res = await response.json();
if (response.ok) {
console.log("Resp recieved", res.msg);
setDeviceMsgs(res.msg);
} else {
console.log("No devices=====>", res.msg);
setDeviceMsgs(null);
}
} catch (e) {
console.log("Error fetching ", e);
}
};
return (
<div>
<Line
data={{
// labels: ['01:20', '01:30', '01:40', '01:50', '01:55', '01:58'],
labels:
deviceMsgs && deviceMsgs.length > 0
? deviceMsgs.map((deviceMsg) => deviceMsg.time)
: [""],
datasets: [
{
label: "demo",
data:
deviceMsgs && deviceMsgs.length > 0
? deviceMsgs.map(
(deviceMsg) => deviceMsg.msg[0].val
)
: [""],
backgroundColor: "rgba(255,192,203 ,0.6)",
borderColor: "red",
borderWidth: 1,
fill: true,
borderWidth: 3,
},
],
}}
height={400}
width={1500}
options={{
maintainAspectRatio: false,
repsonsive: true,
animation: {
duration: 0,
},
scales: {
xAxes: [
{
ticks: { display: false },
gridLines: {
display: false,
drawBorder: false,
},
},
],
yAxes: [
{
ticks: { display: false },
stacked: true,
ticks: {
beginAtZero: true,
},
gridLines: {
display: false,
drawBorder: false,
},
},
],
},
legend: {
display: false,
},
tooltips: {
enabled: false,
},
}}
/>
</div>
);
}
我注意到只有动画选项有效,其他选项无效。就像我不想在图表中显示图例,但即使设置为false,它仍然会显示出来。
我遇到了同样的问题;根据最新的chart-js文档,选项应该在插件部分中-请参阅此处的文档https://www.chartjs.org/docs/latest/configuration/title.html
将react-chattjs-2版本降级为";2〃;如果是";3〃;。它对我有用。