如何在react中使用chart.js显示折线图?

yvgpqqbh  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(269)

我引用了here。按照她的步骤,我可以执行我的BarChart。但是当我试图将其更改为LineChart时,出现了一些错误。
error 1error 2
折线图代码:

  1. import React, { useState, useEffect } from 'react'
  2. import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend,} from 'chart.js'
  3. import {Line} from "react-chartjs-2"
  4. // Radar, Doughnut, Polar, Pie
  5. import axios from 'axios';
  6. ChartJS.register(
  7. CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend
  8. );
  9. function LineChart() {
  10. const [chartData, setChartData] = useState({datasets: [],});
  11. const Chart = () => {
  12. let Cost = [];
  13. let No = [];
  14. axios.get("http://localhost:3001/api/TranscationRecord/Cost")
  15. .then(res => {
  16. console.log(res);
  17. for(const dataObj of res.data){
  18. Cost.push(parseInt(dataObj.Cost));
  19. const d = new Date(dataObj.StartD);
  20. No.push(d.toLocaleDateString('en-us',{day:"2-digit",month:"2-digit" }));
  21. }
  22. setChartData({
  23. labels: No,
  24. type:'line',
  25. datasets: [{
  26. label: 'Daily Cost',
  27. data: Cost,
  28. backgroundColor:'rgba(54, 162, 235, 0.2)',
  29. borderColor: 'rgba(54, 162, 235, 1)',
  30. borderWidth: 1,
  31. }],
  32. });
  33. })
  34. .catch(err =>{
  35. console.log(err);
  36. })
  37. }
  38. useEffect(() => {Chart();}, []);
  39. return(
  40. <div className="App">
  41. <h1>Line Chart</h1>
  42. <div>
  43. <Line data = { chartData }/>
  44. </div>
  45. </div>
  46. )
  47. }
  48. export default LineChart;

我试图发现并解决问题,我知道有些问题
datasets:{}

  1. setChartData({
  2. labels: No,
  3. type:'line',
  4. datasets: [{
  5. label: 'Daily Cost',
  6. data: Cost,
  7. backgroundColor:'rgba(54, 162, 235, 0.2)',
  8. borderColor: 'rgba(54, 162, 235, 1)',
  9. borderWidth: 1,
  10. }],
  11. });

因此,我将datasets:{}量化为data{}

  1. setChartData({
  2. labels: No,
  3. type:'line',
  4. data:{
  5. datasets: [{
  6. label: 'Daily Cost',
  7. data: Cost,
  8. backgroundColor:'rgba(54, 162, 235, 0.2)',
  9. borderColor: 'rgba(54, 162, 235, 1)',
  10. borderWidth: 1,
  11. }],
  12. }
  13. });

未出现错误,但无法显示LineChart like this
为什么会发生这种情况,我该如何解决?

p8h8hvxi

p8h8hvxi1#

就像错误说你不导入和注册PointElement。对于折线图,你还需要导入和注册LineElement,就像你对barElemekt,legend等所做的那样

相关问题