如何更改Chart.js中的日期格式？

jdgnovmf  于 2022-11-06  发布在  Chart.js
关注(0)|答案(4)|浏览(298)

I am confused about how to change my Date Format in Chart.js. I grabbed my data from the MySQL database one of my columns is called "StartD"
[{"RECORD_NO":217,"Cost":4971,"StartD":"5/8/2022"},{"RECORD_NO":216,"Cost":1814,"StartD":"4/8/2022"},{"RECORD_NO":215,"Cost":3335,"StartD":"3/8/2022"},{"RECORD_NO":214,"Cost":1886,"StartD":"2/8/2022"},{"RECORD_NO":213,"Cost":1274,"StartD":"1/8/2022"},{"RECORD_NO":212,"Cost":2238,"StartD":"31/7/2022"},{"RECORD_NO":211,"Cost":1819,"StartD":"30/7/2022"},{"RECORD_NO":210,"Cost":1021,"StartD":"29/7/2022"},{"RECORD_NO":209,"Cost":2564,"StartD":"28/7/2022"},{"RECORD_NO":208,"Cost":4534,"StartD":"27/7/2022"},{"RECORD_NO":207,"Cost":4187,"StartD":"26/7/2022"},{"RECORD_NO":206,"Cost":2337,"StartD":"25/7/2022"},{"RECORD_NO":205,"Cost":4778,"StartD":"24/7/2022"},{"RECORD_NO":204,"Cost":3215,"StartD":"23/7/2022"},{"RECORD_NO":203,"Cost":4469,"StartD":"22/7/2022"},{"RECORD_NO":202,"Cost":1883,"StartD":"21/7/2022"},{"RECORD_NO":201,"Cost":1097,"StartD":"20/7/2022"},{"RECORD_NO":200,"Cost":2918,"StartD":"19/7/2022"},{"RECORD_NO":199,"Cost":4956,"StartD":"18/7/2022"},{"RECORD_NO":198,"Cost":1565,"StartD":"17/7/2022"},{"RECORD_NO":197,"Cost":4425,"StartD":"16/7/2022"},{"RECORD_NO":196,"Cost":2277,"StartD":"15/7/2022"},{"RECORD_NO":195,"Cost":3866,"StartD":"14/7/2022"},{"RECORD_NO":194,"Cost":1546,"StartD":"13/7/2022"},{"RECORD_NO":193,"Cost":563,"StartD":"12/7/2022"},{"RECORD_NO":192,"Cost":576,"StartD":"11/7/2022"},{"RECORD_NO":191,"Cost":731,"StartD":"10/7/2022"},{"RECORD_NO":190,"Cost":2850,"StartD":"9/7/2022"},{"RECORD_NO":189,"Cost":1154,"StartD":"8/7/2022"},{"RECORD_NO":188,"Cost":4447,"StartD":"7/7/2022"},{"RECORD_NO":187,"Cost":3476,"StartD":"6/7/2022"},{"RECORD_NO":186,"Cost":1047,"StartD":"5/7/2022"},{"RECORD_NO":185,"Cost":1049,"StartD":"4/7/2022"},{"RECORD_NO":184,"Cost":1566,"StartD":"3/7/2022"},{"RECORD_NO":183,"Cost":700,"StartD":"2/7/2022"},{"RECORD_NO":182,"Cost":4728,"StartD":"1/7/2022"},{"RECORD_NO":181,"Cost":4549,"StartD":"30/6/2022"},{"RECORD_NO":180,"Cost":1155,"StartD":"29/6/2022"},{"RECORD_NO":179,"Cost":2148,"StartD":"28/6/2022"},{"RECORD_NO":178,"Cost":4934,"StartD":"27/6/2022"},{"RECORD_NO":177,"Cost":4353,"StartD":"26/6/2022"},{"RECORD_NO":176,"Cost":2546,"StartD":"25/6/2022"},{"RECORD_NO":175,"Cost":1239,"StartD":"24/6/2022"},{"RECORD_NO":174,"Cost":1724,"StartD":"23/6/2022"},{"RECORD_NO":173,"Cost":769,"StartD":"22/6/2022"},{"RECORD_NO":172,"Cost":670,"StartD":"21/6/2022"},{"RECORD_NO":171,"Cost":4634,"StartD":"20/6/2022"},{"RECORD_NO":170,"Cost":2742,"StartD":"19/6/2022"},{"RECORD_NO":169,"Cost":4797,"StartD":"18/6/2022"},{"RECORD_NO":168,"Cost":3317,"StartD":"17/6/2022"}]
I put it into my BarChar.js file and it recognized the data.

  1. import React, {
  2.   useState,
  3.   useEffect
  4. } from 'react'
  5. import {
  6.   Chart as ChartJS,
  7.   CategoryScale,
  8.   LinearScale,
  9.   BarElement,
  10.   Title,
  11.   Tooltip,
  12.   Legend,
  13. } from 'chart.js'
  14. import {
  15.   Bar
  16. } from "react-chartjs-2"
  17. // Radar, Doughnut, Polar, Pie
  18. import axios from 'axios';
  20. ChartJS.register(
  21.   CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend
  22. );
  24. function BarChart() {
  25.   const [chartData, setChartData] = useState({
  26.     datasets: [],
  27.   });
  29.   const Chart = () => {
  30.     let Cost = [];
  31.     let No = [];
  33.     axios.get("http://localhost:3001/api/TranscationRecord/Cost")
  34.       .then(res => {
  35.         console.log(res);
  36.         for (const dataObj of res.data) {
  37.           Cost.push(parseInt(dataObj.Cost));
  38.           No.push(parseInt(dataObj.StartD));
  39.         }
  40.         setChartData({
  41.           labels: No,
  42.           datasets: [{
  43.             label: 'Daily Cost',
  44.             data: Cost,
  45.             backgroundColor: [
  46.               'rgba(255, 99, 132, 0.2)',
  47.               'rgba(54, 162, 235, 0.2)',
  48.               'rgba(255, 206, 86, 0.2)',
  49.               'rgba(75, 192, 192, 0.2)',
  50.               'rgba(153, 102, 255, 0.2)',
  51.               'rgba(255, 159, 64, 0.2)',
  52.               'rgba(255, 99, 132, 0.2)',
  53.               'rgba(54, 162, 235, 0.2)',
  54.               'rgba(255, 206, 86, 0.2)',
  55.               'rgba(75, 192, 192, 0.2)',
  56.               'rgba(153, 102, 255, 0.2)',
  57.               'rgba(255, 159, 64, 0.2)',
  58.               'rgba(255, 99, 132, 0.2)',
  59.               'rgba(54, 162, 235, 0.2)',
  60.               'rgba(255, 206, 86, 0.2)',
  61.               'rgba(75, 192, 192, 0.2)',
  62.               'rgba(153, 102, 255, 0.2)',
  63.               'rgba(255, 159, 64, 0.2)',
  64.               'rgba(255, 99, 132, 0.2)',
  65.               'rgba(54, 162, 235, 0.2)',
  66.               'rgba(255, 206, 86, 0.2)',
  67.               'rgba(75, 192, 192, 0.2)',
  68.               'rgba(153, 102, 255, 0.2)',
  69.               'rgba(255, 159, 64, 0.2)',
  70.             ],
  71.             borderColor: [
  72.               'rgba(255, 99, 132, 1)',
  73.               'rgba(54, 162, 235, 1)',
  74.               'rgba(255, 206, 86, 1)',
  75.               'rgba(75, 192, 192, 1)',
  76.               'rgba(153, 102, 255, 1)',
  77.               'rgba(255, 159, 64, 1)',
  78.               'rgba(255, 99, 132, 1)',
  79.               'rgba(54, 162, 235, 1)',
  80.               'rgba(255, 206, 86, 1)',
  81.               'rgba(75, 192, 192, 1)',
  82.               'rgba(153, 102, 255, 1)',
  83.               'rgba(255, 159, 64, 1)',
  84.               'rgba(255, 99, 132, 1)',
  85.               'rgba(54, 162, 235, 1)',
  86.               'rgba(255, 206, 86, 1)',
  87.               'rgba(75, 192, 192, 1)',
  88.               'rgba(153, 102, 255, 1)',
  89.               'rgba(255, 159, 64, 1)',
  90.               'rgba(255, 99, 132, 1)',
  91.               'rgba(54, 162, 235, 1)',
  92.               'rgba(255, 206, 86, 1)',
  93.               'rgba(75, 192, 192, 1)',
  94.               'rgba(153, 102, 255, 1)',
  95.               'rgba(255, 159, 64, 1)',
  96.             ],
  97.             borderWidth: 1,
  98.             options: {
  99.               scales: {
  100.                 x: {
  101.                   type: 'time',
  102.                   time: {
  103.                     unit: 'date',
  104.                     parser: 'dd/mm/yyyy'
  105.                   }
  106.                 },
  107.                 y: {
  108.                   beginAtZero: true
  109.                 }
  110.               }
  112.             }
  114.           }]
  115.         });
  116.       })
  117.       .catch(err => {
  118.         console.log(err);
  119.       })
  120.   }
  122.   useEffect(() => {
  123.     Chart();
  124.   }, []);
  126.   return ( <
  127.     div className = "App" >
  128.     <
  129.     h1 > Bar Chart < /h1> <
  130.     div >
  131.     <
  132.     Bar data = {
  133.       chartData
  134.     }
  135.     /> < /
  136.     div > <
  137.     /div>  
  138.   )
  139. }
  140. export default BarChart;

The result

It can only present the Day but not the format of "DD/MM" Is that a way to solve the problem?

chart.js

4条答案

按热度按时间
h7appiyu

h7appiyu1#

请尝试displayFormats：

  1. const chart = new Chart(ctx, {
  2.     type: 'line',
  3.     data: data,
  4.     options: {
  5.         scales: {
  6.             x: {
  7.                 type: 'time',
  8.                 time: {
  9.                     displayFormats: {
  10.                         quarter: 'MMM YYYY'
  11.                     }
  12.                 }
  13.             }
  14.         }
  15.     }
  16. });

Chart.js时间显示格式

展开查看全部
赞(0）分享  回复(0）举报  2022-11-09
pkbketx9

pkbketx92#

如下所示更改for循环

  1. for (const dataObj of res.data) {
  2.       Cost.push(parseInt(dataObj.Cost));
  3.       const date = new Date(dataObj.StartD);
  4.       No.push(date->toLocaleDateString('en-us',{month:"2-digit", day:"2-digit"));
  5.     }
赞(0）分享  回复(0）举报  2022-11-09
fwzugrvs

fwzugrvs3#

我刚刚找到了答案。谢谢你的帮助。我把@terinao的代码作为参考。
像这样更改代码可以解决问题。

  1. axios.get("http://localhost:3001/api/TranscationRecord/Cost")
  2.     .then(res => {
  3.         console.log(res);
  4.         for(const dataObj of res.data){
  5.             Cost.push(parseInt(dataObj.Cost));
  6.             const d = new Date(dataObj.StartD);
  7.             No.push(d.toLocaleDateString('en-us',{day:"2-digit",month:"2-digit" }));
  8.         }

结果是这样的：（我将颜色更改为蓝色，但它们是相同的数据集）The bar chart

赞(0）分享  回复(0）举报  2022-11-09
tzdcorbm

tzdcorbm4#

条形图的X轴当前是分类轴而不是时间轴。原因是options放错了位置，它不应在dataset中定义，而应遵循Chart.js配置的顶级结构。
对于react-chartjs-2，您可以将options定义为单独的对象，并按如下方式提供：

  1. <Bar data={data} options={options} />

一旦纠正了这个问题，就可以根据Chart.js文档定义显示格式了。
还请考虑到，时间刻度要求同时存在日期库和相应的适配器。

赞(0）分享  回复(0）举报  2022-11-09
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com