VueJS中能否使用$refs结合Google Charts进行图表渲染？

子组件（独立图表组件）写法 #

1. 给图表容器绑定ref，替代原来用id获取元素的方式
2. 等组件挂载完成（也就是mounted钩子）再调用Google Charts的绘制方法——这时候DOM已经渲染好，ref能拿到真实元素
3. 把加载图表、绘制图表的逻辑封装在组件里

示例代码：

<template>
  <!-- 给容器绑ref -->
  <div ref="chartContainer"></div>
</template>

<script>
export default {
  name: 'TimelineChart',
  props: {
    // 从父组件拿图表数据
    chartData: {
      type: Array,
      required: true
    }
  },
  mounted() {
    // 加载Google Charts的timeline包
    google.charts.load('current', { packages: ['timeline'] });
    google.charts.setOnLoadCallback(this.drawChart);
  },
  methods: {
    drawChart() {
      // 用ref拿容器，代替getElementById
      const container = this.$refs.chartContainer;
      if (!container) return;

      const data = google.visualization.arrayToDataTable(this.chartData);
      const options = {
        timeline: { showRowLabels: true },
        height: 400
      };

      const chart = new google.visualization.Timeline(container);
      chart.draw(data, options);
    }
  },
  watch: {
    // 数据变了就重绘图表
    chartData: {
      deep: true,
      handler() {
        this.drawChart();
      }
    }
  }
};
</script>

父组件调用 #

直接传数据给子组件就行：

<template>
  <div>
    <h2>项目时间线</h2>
    <TimelineChart :chart-data="timelineData" />
  </div>
</template>

<script>
import TimelineChart from './TimelineChart.vue';

export default {
  components: { TimelineChart },
  data() {
    return {
      timelineData: [
        ['项目', '任务', '开始时间', '结束时间'],
        ['项目A', '需求分析', new Date(2024, 0, 1), new Date(2024, 0, 15)],
        ['项目A', '开发阶段', new Date(2024, 0, 16), new Date(2024, 1, 28)],
        ['项目B', '原型设计', new Date(2024, 1, 1), new Date(2024, 1, 10)]
      ]
    };
  }
};
</script>

要注意的点 #

• 一定要在mounted里调用绘制逻辑，created钩子时DOM还没挂载，ref拿不到元素
• 如果图表数据会动态更新，加个watch监听数据变化，自动重绘
• 确保Google Charts已经正确引入项目（可以在index.html里加script标签，或者用npm包安装）

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