React使用react-chartjs-2实现折线图时X轴值全部为0问题求助

问题根因 #

你遇到的问题由3个错误共同导致：

1. mock数据赋值错误：你生成了日期对象但没有赋值给x轴字段，反而把y轴的数值同时塞给了x、y字段，和你配置的时间类型x轴不匹配
2. 配置格式错误：你用的是Chart.js v2的轴配置写法，react-chartjs-2 3.x版本对应Chart.js v3，v3中scales下的单轴配置是对象格式，不是数组格式，你的x轴配置完全没有生效
3. 缺少时间轴依赖：Chart.js v3的时间类型轴需要额外安装日期适配器才可以正常解析时间格式数据

解决步骤 #

1. 首先安装依赖
   执行npm命令：

   npm install date-fns chartjs-adapter-date-fns
   

2. 注册Chart.js必要组件、修复代码逻辑
   完整修改后的代码如下：

   import React, { useEffect, useState } from 'react'
   import './LineGraph.css'
   import { Line } from "react-chartjs-2"
   // 导入Chart.js核心和需要的组件、适配器
   import {
     Chart as ChartJS,
     LineController,
     LineElement,
     PointElement,
     LinearScale,
     TimeScale,
     Tooltip,
     Legend
   } from 'chart.js'
   import 'chartjs-adapter-date-fns'
   
   // 注册组件
   ChartJS.register(
     LineController,
     LineElement,
     PointElement,
     LinearScale,
     TimeScale,
     Tooltip,
     Legend
   )
   
   function LineGraph() {
     const [graphData, setGraphData] = useState([])
   
     const createMockData = () => {
       let data = [];
       let value = 50;
       for(var i = 1; i < 366; i++) {
         let date = new Date()
         date.setHours(0,0,0,0)
         date.setDate(i)
         value += Math.round((Math.random() < 0.5 ? 1 : 0) * Math.random() * 10)
         // 修复：x轴赋值日期，y轴赋值数值
         data.push({x: date, y: value})
       }
       setGraphData(data) 
     }
         
     useEffect(()=> {
       createMockData()
     }, [])
   
     return (
       <div className="linegraph">
         <Line 
           data={{
             datasets: [
               {
                 type: "line",
                 data: graphData,
                 backgroundColor: "black",
                 borderColor: "#5AC53B",
                 borderWidth: 2,
                 pointBorderColor: 'rgba(22, 22, 22, 0)',
                 pointBackgroundColor: 'rgba(0,0,0,0)',
                 pointHoverBackgroundColor: '#5AC53B',
                 pointHoverBorderColor: '#000000',
                 pointHoverBorderWidth: 4,
                 pointHoverRadius: 6,
               }
             ]
           }}
   
           options={{
             plugins:{
               legend: {
                 display: false
               },
               tooltip: {
                 interaction: {
                   mode: "index",
                   intersect: false    
                 }
               }
             },
             scales: {
               // 修复：v3轴配置为对象，去掉数组包裹
               x: {
                 type: "time",
                 time: {
                   format: "MM/DD/YY",
                   tooltipFormat: "ll",
                 },
                 ticks: {
                   display: false,
                 }
               },
               y: {
                 ticks: {
                   display: false
                 }
               }
             }
              
           }}   
         />
       </div>
     )
   }
   
   export default LineGraph
   

额外说明 #

如果你不需要用时间类型的x轴，只想用数值作为x轴维度，只需要把x轴的type改为linear，同时保留mock数据里x为数值的写法即可，不需要安装时间适配器。

内容的提问来源于stack exchange，提问作者Sam Ballinger