带有 ChartJS 的 Vuejs 从 API 填充

Question

如何使用 API 中的数据填充图表

<script>
import VueCharts from 'vue-chartjs'
import { Pie, Bar } from 'vue-chartjs'
import axios from 'axios'
export default {
data() {
  return {
    dailyLabels: [] ,
    dailyData: []
  }
},
extends: Bar,
mounted() {
  // Overwriting base render method with actual data.
  this.renderChart({
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday ', 'Friday', 'Saturday', 'Sunday'],
    datasets: [
      {
        label: 'Daily Students',
        backgroundColor: '#f87979',
        data: [12, 20, 1, 50, 10, 40, 18]
      }
    ]
  })
},
created() {
  axios.get(`https://localhost:44379/api/DailyStudents`)
    .then(response => {
      // JSON responses are automatically parsed.
      this.dailyData = response.data.days
    })
    .catch(e => {
      this.errors.push(e)
    })
}
}
</script>

我的 API 返回以下内容：

[
  {"day":"Wednesday","totalStudents":"21"},
  {"day":"Tuesday","totalStudents":"2"},
  {"day":"Thursday","totalStudents":"20"},
  {"day":"Friday","totalStudents":"23"}
]

天数应该是我的标签，总学生应该是我的数据

图表当然应该显示每天的学生人数，但我发现的例子有点令人困惑。

Answer 1

您可以使用

Array.map提取必要的数据。

<script>
import VueCharts from 'vue-chartjs'
import { Pie, Bar, mixins } from 'vue-chartjs'
import axios from 'axios'
export default {
  mixins: [mixins.reactiveData],
  data() {
    return {
      chartData: ''
    }
  },
  extends: Bar,
  mounted() {
    this.renderChart(this.chartData)
  },
  created() {
    axios.get(`https://localhost:44379/api/DailyStudents`)
      .then(response => {
        // JSON responses are automatically parsed.
        const responseData = response.data
        this.chartData = {
          labels: responseData.map(item => item.day),
          datasets: [
            label: 'Daily Students',
             backgroundColor: '#f87979',
             data: responseData.map(item => item.totalStudents)
          ]
        }
      })
      .catch(e => {
        this.errors.push(e)
      })
  }
}
</script>

请注意，您需要使用 mixins.reactiveData 使组件对数据更改做出反应。