如何解决react-chartjs-2 选项道具没有按预期工作
我正在使用 react-chartjs-2 来构建折线图,但我在 options 属性中指定的所有选项都不起作用。
这是我的代码:
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,legend: {
display: false,tooltips: {
enabled: false,}}
/>
</div>
);
}
我注意到只有动画选项有效,而其他选项无效。就像我不想在图表中显示图例一样,但即使将其设置为 false,它仍然会显示。
解决方法
如果您的 react-chartjs-2 版本为“3”,则将其降级为“2”。它对我有用。
,我遇到了同样的问题;与最新的图表 js 文档一致,这些选项应该在进一步的插件部分中 - 请参阅此处的文档 https://www.chartjs.org/docs/latest/configuration/title.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。