时间戳

首页 > 解决方案 > 如何转换日期字段以响应 vuejs 中的字符串，以便我可以根据其他列进行分组

vue.js - 如何转换日期字段以响应 vuejs 中的字符串，以便我可以根据其他列进行分组

问题描述

我需要将响应日期函数发送到图表的 X 坐标，为此，我需要日期格式的此列。我尝试使用 momentjs 进行转换，它最初是日期格式，但是当我将它推送到另一个数组时，它再次转换为字符串。如何将日期格式数据推送到数组并在 X 坐标中使用。

<script>
import { getAPI } from '../axios-api'
import Chart from "../components/ChartJS.vue";
import moment from "moment";
export default{
name : 'ChartVis',
data: () => {
  return {
    chartData: [],
    labels:[],
  };
},
components:{
        Navbar,
        Chart,
    },
 mounted () {
        this.getData()
    },
methods: {
  async getData(){
    
     await getAPI.get('/summary')
        .then((response) => {

            this.labels = (response.data.map(item => parseFloat(item.length_max)))

          response.data.forEach(item => {
            const newDate = moment(item.date).format("DD-MM-YYYY");
            console.log(newDate)
            changedDate.push(newDate)
          });

          

          this.chartData=changedDate
          console.log(changedDate)
          console.log(this.labels)
          })
        .catch(err => {
            console.log(err)
          })

  },

  },
}
</script>

推送到阵列之前和推送之后都显示在图像中 日期

使用它作为字符串，我可以绘制图表，但是如何根据其他列分组并绘制图表。

标签： vue.jschartsvuejs2vue-componentvuetify.js

解决方案

Moment 的format函数将 a 转换Date为字符串。看这里。因此，该changedDate数组仅包含字符串。

您可以将原始Date值 ( item.date) 与格式化值 ( newDate) 存储在一个对象中，并修改图表以将一个用于列绑定，另一个用于显示目的。例如：

changedDate.push({
  dateValue: item.date,
  dateString: newDate
});

然后相应地更改图表代码（如果可能）。

或者，大多数图表组件为显示和绑定数据提供了不同的属性，或者至少提供了一种指定格式的方法。如果是这种情况，您可以保留代码不变并更改图表中某处的道具。

推荐阅读