文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在Chart.js中更改日期格式？

问如何在Chart.js中更改日期格式？
EN

Stack Overflow用户
提问于 2022-06-27 04:21:20
回答 4查看 120关注 0票数 0

我对如何在Chart.js中更改日期格式感到困惑。我从MySQL数据库抓取数据--我的一列叫做"StartD“

{"RECORD_NO":217，“费用”：4971，"StartD":"5/8/2022"}，{"RECORD_NO":216，“成本”：1814，"StartD":"4/8/2022"}，{"RECORD_NO":215，“成本”：3335，"StartD":"3/8/2022"}，{"RECORD_NO":214，“成本”：1886，"StartD":"2/8/2022"}{"RECORD_NO":213，“费用”：1274，"StartD":"1/8/2022"}，{"RECORD_NO":212，“成本”：2238，"StartD":"31/7/2022"}，{"RECORD_NO":211，“成本”：1819年，"StartD":"30/7/2022"}，{"RECORD_NO":210，“成本”：1021，"StartD":"29/7/2022"}，}{"RECORD_NO":209，“费用”：2564，"StartD":"28/7/2022"}，{"RECORD_NO":208，“成本”：4534，"StartD":"27/7/2022"}，{"RECORD_NO":207，“成本”：4187，"StartD":"26/7/2022"}，{"RECORD_NO":206，“成本”：2337，"StartD":"25/7/2022"}{"RECORD_NO":205，“费用”：4778，"StartD":"24/7/2022"}，{"RECORD_NO":204，“成本”：3215，"StartD":"23/7/2022"}，{"RECORD_NO":203，“成本”：4469，"StartD":"22/7/2022"}，{"RECORD_NO":202，“成本”：1883年，"StartD":"21/7/2022"}{"RECORD_NO":201，“费用”：1097，"StartD":"20/7/2022"}，{"RECORD_NO":200，“成本”：2918，"StartD":"19/7/2022"}，{"RECORD_NO":199，“成本”：4956，"StartD":"18/7/2022"}，{"RECORD_NO":198，“成本”：1565，"StartD":"17/7/2022"}{"RECORD_NO":197，“费用”：4425，"StartD":"16/7/2022"}，{"RECORD_NO":196，“成本”：2277，"StartD":"15/7/2022"}，{"RECORD_NO":195，“成本”：3866，"StartD":"14/7/2022"}，{"RECORD_NO":194，“成本”：1546，"StartD":"13/7/2022"}{"RECORD_NO":193，“费用”：563，"StartD":"12/7/2022"}，{"RECORD_NO":192，“成本”：576，"StartD":"11/7/2022"}，{"RECORD_NO":191，“成本”：731，"StartD":"10/7/2022"}，{"RECORD_NO":190，“成本”：2850，"StartD":"9/7/2022"}{"RECORD_NO":189，“成本”：1154，"StartD":"8/7/2022"}，{"RECORD_NO":188，“成本”：4447，"StartD":"7/7/2022"}，{"RECORD_NO":187，“成本”：3476，"StartD":"6/7/2022"}，{"RECORD_NO":186，“成本”：1047，"StartD":"5/7/2022"}{"RECORD_NO":185，“费用”：1049，"StartD":"4/7/2022"}，{"RECORD_NO":184，“成本”：1566，"StartD":"3/7/2022"}，{"RECORD_NO":183，“成本”：700，"StartD":"2/7/2022"}，{"RECORD_NO":182，“成本”：4728，"StartD":"1/7/2022"}{"RECORD_NO":181，“费用”：4549，"StartD":"30/6/2022"}，{"RECORD_NO":180，“成本”：1155，"StartD":"29/6/2022"}，{"RECORD_NO":179，“成本”：2148，"StartD":"28/6/2022"}，{"RECORD_NO":178，“费用”：4934，"StartD":"27/6/2022"}{"RECORD_NO":177，“费用”：4353，"StartD":"26/6/2022"}，{"RECORD_NO":176，“成本”：2546，"StartD":"25/6/2022"}，{"RECORD_NO":175，“成本”：1239，"StartD":"24/6/2022"}，{"RECORD_NO":174，“成本”：1724，"StartD":"23/6/2022"}{"RECORD_NO":173，“费用”：769，"StartD":"22/6/2022"}，{"RECORD_NO":172，“成本”：670，"StartD":"21/6/2022"}，{"RECORD_NO":171，“成本”：4634，"StartD":"20/6/2022"}，{"RECORD_NO":170，“成本”：2742，"StartD":"19/6/2022"}{"RECORD_NO":169，“成本”：4797，"StartD":"18/6/2022"}，{"RECORD_NO":168，“成本”：3317，"StartD":"17/6/2022"}

我把它放进我的BarChar.js文件中，它识别了数据。

​

代码语言：javascript
复制
import React, {
  useState,
  useEffect
} from 'react'
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js'
import {
  Bar
} from "react-chartjs-2"
// Radar, Doughnut, Polar, Pie
import axios from 'axios';


ChartJS.register(
  CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend
);


function BarChart() {
  const [chartData, setChartData] = useState({
    datasets: [],
  });

  const Chart = () => {
    let Cost = [];
    let No = [];

    axios.get("http://localhost:3001/api/TranscationRecord/Cost")
      .then(res => {
        console.log(res);
        for (const dataObj of res.data) {
          Cost.push(parseInt(dataObj.Cost));
          No.push(parseInt(dataObj.StartD));
        }
        setChartData({
          labels: No,
          datasets: [{
            label: 'Daily Cost',
            data: Cost,
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)',
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)',
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)',
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)',
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
            ],
            borderWidth: 1,
            options: {
              scales: {
                x: {
                  type: 'time',
                  time: {
                    unit: 'date',
                    parser: 'dd/mm/yyyy'
                  }
                },
                y: {
                  beginAtZero: true
                }
              }

            }

          }]
        });
      })
      .catch(err => {
        console.log(err);
      })
  }

  useEffect(() => {
    Chart();
  }, []);

  return ( <
    div className = "App" >
    <
    h1 > Bar Chart < /h1> <
    div >
    <
    Bar data = {
      chartData
    }
    /> < /
    div > <
    /div>  
  )
}
export default BarChart;

​

结果

​

它只能呈现日而不能呈现"DD/MM“的格式，这是解决问题的一种方法吗？

chart.js
reactjs
EN

回答 4

Stack Overflow用户

发布于 2022-06-27 04:43:17

试试displayFormats

代码语言：javascript
复制
const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            x: {
                type: 'time',
                time: {
                    displayFormats: {
                        quarter: 'MMM YYYY'
                    }
                }
            }
        }
    }
});

Chart.js时间显示格式

票数 0
EN

Stack Overflow用户

发布于 2022-06-27 04:48:13

您的条形图的x轴当前是范畴轴而不是时间轴.原因是options被错误地放置，它不应该在dataset中定义，而应该遵循Chart.js配置的顶层结构。

使用react-chartjs-2，您可以将options定义为一个单独的对象，并按如下方式提供：

代码语言：javascript
复制
<Bar data={data} options={options} />

一旦纠正了这一点，就可以根据Chart.js文档这里定义显示格式。

也请考虑，时间尺度要求两者，日期库和相应的适配器。在场。

票数 0
EN

Stack Overflow用户

发布于 2022-06-27 05:19:47

如下图所示更改for循环

代码语言：javascript
复制
for (const dataObj of res.data) {
      Cost.push(parseInt(dataObj.Cost));
      const date = new Date(dataObj.StartD);
      No.push(date->toLocaleDateString('en-us',{month:"2-digit", day:"2-digit"));
    }
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/72766961

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档