VueJS：如何根据响应数据列分组

Question

我需要将响应日期函数发送到我的图表的 X 坐标，为此，我需要日期格式的此列（使用字符串可以正常工作）。如果可以通过保留日期列进行绘制作为字符串，它会很好，但对于分组，至少这必须转换是我的想法。有来自银行端的重复日期，我需要根据其他响应数据（即位置）进行分组。如何实现这一点以及如何根据位置列显示折线图

我的代码

<script>
import { getAPI } from '../axios-api'
import Navbar from '../components/Navbar.vue';
import custChart from "../components/ChartJS.vue";
// import moment from "moment";
export default{
name : 'ChartVis',
data: () => {
  return {
    chartData: [
      {
        label : 'length_max',
        backgroundColor: '#FC2525',
        data:[]
      },
      {
        label : 'length_min',
        backgroundColor: '#05CBE1',
        data:[]
      },
      {
        label : 'length_avg',
        backgroundColor: '#EC2525',
        data:[]
      },
      {
        label : 'length_std',
        backgroundColor: '#DC2525',
        data:[]
      },
      {
        label : 'location',
        backgroundColor: '#DC2525',
        data:[]
      },
    ],
    labels:[],
    loaded : false,
  };
},
components:{
        Navbar,
        custChart,
    },
 mounted () {
        this.loaded = false
        this.getData()
    },
methods: {
  async getData(){
    
     await getAPI.get('datavisualisation/summary')
        .then((response) => {
          

            this.chartData[0] = (response.data.map(item => parseFloat(item.length_max)))
            this.chartData[1] = (response.data.map(item => parseFloat(item.length_min)))
            this.chartData[2] = (response.data.map(item => parseFloat(item.length_avg)))
            this.chartData[3] = (response.data.map(item => parseFloat(item.length_std)))
            this.chartData[4] = (response.data.map(item => (item.location)))
            this.labels = response.data.map(item => item.date)
          this.loaded = true
          })
          
        .catch(err => {
            console.log(err)
          })

  },

  },
}
</script>

重复日期

其他栏目

我的图表

Answer 1

我在您的问题的任何地方都找不到问题。您的意思是像您希望对数组进行排序一样分组在一起吗？你在做什么样的图表？您想在同一天获得多个数据点吗？为什么？