VueJS:如何根据响应数据列进行分组 [英] VueJS : How to group by based on response data columns

问题描述

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

I need to send the response date function to the X coordinate of my graph and for this, I need this column in date format (with the string it is working fine).If it is okay to draw by keeping the date column as string, it'd be good, but for grouping at least this has to be converted is what I think. There are repeated dates coming from the bank end, I need to group by based on the other response data, which is location. How can this be achieved and how can I display the line chart for this based on the Location column

我的代码

<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>

重复日期

其他栏目

我的图表

推荐答案

我在您的问题中找不到任何问题.你的意思是分组在一起，因为你想要对数组进行排序?你在制作什么样的图表?您想在同一天获得多个数据点吗?为什么?

i can't find a problem anywhere in your question. Do you mean grouped together as in you want the array to be sorted? what kind of chart are you making? Do you want multiple data points on the same day and why?

这篇关于VueJS:如何根据响应数据列进行分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！