Vue-chartjs从API获取数据后无法渲染柱状图问题排查

核心问题点： #

• 变量大小写不匹配：Vue实例中定义的是chartData，但赋值时写成了this.chartdata（小写d），导致数据从未正确赋值，chartData始终为null，触发TypeError: data is null。
• Axios请求写法错误：在async函数中混用了await和.then，且未正确等待Promise完成，导致无法正确获取响应数据。
• 图表数据格式不符合Chart.js要求：直接将API返回的原始数组赋值给chartData，但Chart.js需要包含labels和datasets的结构化数据，而非原始数组。

修正后的完整代码： #

<template>
  <div class="container">
    <Bar v-if="loaded" :data="chartData" />
  </div>
</template>

<script>
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
import axios from 'axios'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

export default {
  name: 'BarChart',
  components: { Bar },
  data: () => ({
    loaded: false,
    chartData: null
  }),
  async mounted () {
    try {
      // 用await正确等待请求完成
      const response = await axios.get('/api/firewall_deny_untab')
      const rawData = response.data

      // 转换为Chart.js需要的数据结构
      this.chartData = {
        labels: rawData.map(item => item.source_ip),
        datasets: [
          {
            label: '事件数量',
            data: rawData.map(item => item.event_count),
            backgroundColor: 'rgba(54, 162, 235, 0.6)'
          }
        ]
      }

      this.loaded = true
    } catch (e) {
      console.error('加载图表数据失败:', e)
    }
  }
}
</script>

关键修正说明： #

1. 修复变量名：将this.chartdata改为this.chartData，确保数据正确绑定。
2. 规范异步请求：使用await替代.then，在async函数中正确处理异步逻辑，保证数据加载完成后再更新状态。
3. 适配数据格式：把API返回的原始数组映射为Chart.js要求的结构：
   • labels：提取所有source_ip作为横轴标签；
   • datasets：封装图例名称和对应的event_count数值，同时可自定义柱状图样式。

内容的提问来源于stack exchange，提问作者FedericoGabusi