Vue.js：如何从API取数并用vue-chart.js绘制月活跃用户图表

嘿，别担心，我刚接触vue-chart.js的时候也懵过，咱们一步步来搞定这个每月活跃用户中位数的图表！

你的原始数据是嵌套结构，得先把月份和对应的中位数提取出来，这是vue-chart.js能正常渲染的前提。可以在组件里写个简单的处理方法：

// 假设你的接口数据存在data里的reports变量中
processChartData() {
  const stats = this.reports.stats;
  // 把对象的月份键转成数组，再逐个提取中位数
  const monthLabels = Object.keys(stats);
  const medianValues = monthLabels.map(month => stats[month].users.median);
  
  return {
    labels: monthLabels,
    datasets: [
      {
        label: '每月活跃用户中位数',
        backgroundColor: '#41B883', // 可以自己换喜欢的颜色
        data: medianValues
      }
    ]
  };
}

咱们以最直观的柱状图为例，继承vue-chart.js的Bar组件来写：

<template>
  <div class="chart-container">
    <h3>每月活跃用户中位数统计</h3>
    <bar-chart :chart-data="chartData" :options="chartOptions"></bar-chart>
  </div>
</template>

<script>
// 导入vue-chartjs的柱状图组件
import { Bar } from 'vue-chartjs';

export default {
  components: {
    BarChart: Bar
  },
  data() {
    return {
      // 这里先放你的测试数据，实际项目换成接口返回的reports
      reports: {
        stats: {
          "2018-02": { users: { "min": 12481, "max": 12581, "length": 19, "average": 12531, "median": 12527 } },
          "2018-03": { users: { "average": 12590, "length": 1, "max": 12590, "median": 12590, "min": 12590 } }
        }
      },
      chartData: {},
      chartOptions: {
        responsive: true, // 自适应容器大小
        scales: {
          y: {
            beginAtZero: false, // 你的数据都是12k+，关闭从零开始更直观
            title: {
              display: true,
              text: '用户数量'
            }
          },
          x: {
            title: {
              display: true,
              text: '月份'
            }
          }
        }
      }
    };
  },
  mounted() {
    // 组件挂载后处理数据并传给图表
    this.chartData = this.processChartData();
  },
  methods: {
    processChartData() {
      const stats = this.reports.stats;
      const monthLabels = Object.keys(stats);
      const medianValues = monthLabels.map(month => stats[month].users.median);
      
      return {
        labels: monthLabels,
        datasets: [
          {
            label: '每月活跃用户中位数',
            backgroundColor: '#41B883',
            data: medianValues
          }
        ]
      };
    }
  }
};
</script>

<style scoped>
.chart-container {
  width: 80%;
  margin: 0 auto;
}
</style>

• 如果是异步获取API数据，记得要等数据拿到后再处理，比如用watch监听reports的变化：

watch: {
  reports: {
    deep: true,
    handler() {
      // 确保stats存在再处理数据
      if (this.reports?.stats) {
        this.chartData = this.processChartData();
      }
    }
  }
}

• 别忘了安装依赖：npm install vue-chartjs chart.js，vue-chartjs是基于chart.js封装的，两个都得装
• 想换图表类型？比如折线图，只需要把import { Bar } from 'vue-chartjs'改成import { Line } from 'vue-chartjs'，组件里换成LineChart: Line就行，其他逻辑不用改～

这样一步步来，你就能顺利生成想要的图表啦😉

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