Question

我正在使用Django REST后端将API数据发送到VueJS前端。我试图将每日计数放在ChartJS图中。

import { HorizontalBar } from '../BaseCharts'

export default {
  extends: HorizontalBar,
  data() {
    return{
    }
  },
  mounted () {
    /* Need to write the API call for chart data here. */
    this.$store.dispatch("DailyCountAction")

this.renderChart({
  labels: [this.$store.state.DailyCount],
  datasets: [
    {
      label: 'Existing Patients',
      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)'
    ],
    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)'
  ],
  borderWidth: 1,
      data: [4,8,2,]
    },

您可以在“标签”字段中看到一个具有返回数据的吸气剂：

 {
        "Check_In_Count": "7",
        "Average_Time_Spent": "3",
        "Average_Wait_Time": "2",
        "Cancelations": "0",
        "New_Patient_Count": "4",
        "Existing_Patient_Count": "3",
        "Current_Cycle_Date": "2062019"
    },
    {
        "Check_In_Count": "4",
        "Average_Time_Spent": "8",
        "Average_Wait_Time": "6",
        "Cancelations": "0",
        "New_Patient_Count": "1",
        "Existing_Patient_Count": "3",
        "Current_Cycle_Date": "2072019"
    },
    {
        "Check_In_Count": "7",
        "Average_Time_Spent": "3",
        "Average_Wait_Time": "9",
        "Cancelations": "0",
        "New_Patient_Count": "0",
        "Existing_Patient_Count": "7",
        "Current_Cycle_Date": "2082019"
    },
    {
        "Check_In_Count": "8",
        "Average_Time_Spent": "8",
        "Average_Wait_Time": "1",
        "Cancelations": "0",
        "New_Patient_Count": "4",
        "Existing_Patient_Count": "4",
        "Current_Cycle_Date": "2092019"
    },

我只需要将所有Current_Cycle_Date值返回到进入“标签”字段的数组中即可。我对如何解决这个问题感到非常困惑。

最后，标签字段应如下所示：标签：['2092019'，'2082019'，'2072019'，'2062019']

我看过在吸气剂中使用MAP的例子。到目前为止没有任何工作。可以使用方法中的某些逻辑来实现吗？

任何建议将不胜感激！

Answer 1

也许您可以尝试将其作为数组返回：

const data = [{
        "Check_In_Count": "7",
        "Average_Time_Spent": "3",
        "Average_Wait_Time": "2",
        "Cancelations": "0",
        "New_Patient_Count": "4",
        "Existing_Patient_Count": "3",
        "Current_Cycle_Date": "2062019"
    },
    {
        "Check_In_Count": "4",
        "Average_Time_Spent": "8",
        "Average_Wait_Time": "6",
        "Cancelations": "0",
        "New_Patient_Count": "1",
        "Existing_Patient_Count": "3",
        "Current_Cycle_Date": "2072019"
    },
    {
        "Check_In_Count": "7",
        "Average_Time_Spent": "3",
        "Average_Wait_Time": "9",
        "Cancelations": "0",
        "New_Patient_Count": "0",
        "Existing_Patient_Count": "7",
        "Current_Cycle_Date": "2082019"
    },
    {
        "Check_In_Count": "8",
        "Average_Time_Spent": "8",
        "Average_Wait_Time": "1",
        "Cancelations": "0",
        "New_Patient_Count": "4",
        "Existing_Patient_Count": "4",
        "Current_Cycle_Date": "2092019"
    }]


var ccd = data.map( i => i.Current_Cycle_Date )

console.log( ccd )

需要VueJS Getter仅将最后JSON属性的所有值作为数组返回

1 个答案: