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>

MY 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来使组件响应数据更改。

带有ChartJS的Vuejs从API填充

1 个答案: