使用chart.js时,图表线未出现在半对数图表中

sshcrbum  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(213)

我正在使用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>
  );
}

结果:

8dtrkrch

8dtrkrch1#

你不需要传递一个选项给labels数组,你传递的是tm变量,这意味着它将使用它作为一个键,你需要将它传递为:

const data = {
  labels: tm,
  datasets: []
}

相关问题