我正在使用react-chartjs-2创建一个使用一些简单数据的半对数图表。我尝试了许多示例,但在最后的图表中,线没有画出来,我也在浏览器控制台中看到任何错误。我在这个项目中使用Next.js & Tailwind CSS。
我也尝试使用时间序列图表中描述的技术,但这些也不起作用
我已经弄清楚了如何创建轴和刻度,现在我该如何画线呢?
这是我的代码。
index.js
import {
Chart as ChartJS,
CategoryScale,
LogarithmicScale,
LogarithmicScaleOptions,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
} from "chart.js";
import { Line } from "react-chartjs-2";
ChartJS.register(
LogarithmicScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
);
export const options = {
scales: {
x: {
display: true,
type: "logarithmic",
min: 0.000001,
max: 1,
},
y: {
display: true,
min: 400,
max: 2500,
},
},
responsive: true,
plugins: {
legend: {
position: "top",
},
title: {
display: true,
text: "5W-10R",
},
},
};
const vmax = [2000, 1750, 1500, 1250, 1000, 750, 500];
const tm = [
0.0000125, 0.00001633, 0.00002222, 0.000032, 0.00005, 0.0002, 0.0008,
];
export const data = {
tm,
datasets: [
{
label: "Dataset 1",
data: vmax,
borderColor: "rgb(255, 99, 132)",
backgroundColor: "rgba(255, 99, 132, 0.5)",
},
],
};
export default function Home({}) {
return (
<div className="">
<div className="flex flex-col items-center justify-center min-h-screen py-2">
<main className="flex flex-col items-center w-full flex-1 px-10 ">
<Line options={options} data={data} />
</main>
</div>
</div>
);
}
结果:
1条答案
按热度按时间8dtrkrch1#
你不需要传递一个选项给labels数组,你传递的是
tm
变量,这意味着它将使用它作为一个键,你需要将它传递为: