Vue3组合式API中vue-google-charts时间线图表getSelection()使用问题

技术栈：Vue 3.0、Quasar 2.6、vue-google-charts 1.1.0，实现Timeline图表时，尝试转换Vue2版本的示例到组合式API失败，报错chartObject未定义。目前select事件能触发，但无法获取选中图表条目的行列数据，需要获取这些数据进行后续图表操作。

问题代码 #

<template>
  <div>
    <GChart
      type="Timeline"
      :data="chartData"
      :settings="{ packages: ['timeline'] }"
      :events="chartEvents"
      ref="gChart"
    />
  </div>
</template>
<script>
import { GChart } from "vue-google-charts";
import { ref } from "vue";
const columns = [
  { type: "string", label: "Position" },
  { type: "string", label: "Name" },
  { type: "string", id: "style", role: "style" },
  { type: "date", label: "Start Date" },
  { type: "date", label: "End Date" },
];
const rows = [
  ["1", "test1", "#181818", new Date("2022-1-1"), new Date("2022-2-6")],
  ["2", "test2", "#e3d3b2", new Date("2022-1-5"), new Date("2022-1-20")],
  ["3", "test3", "#d3e932", new Date("2022-1-3"), new Date("2022-1-13")],
];
export default {
  name: "timeline",
  components: {
    GChart,
  },
  setup() {
    const chartData = [columns, ...rows];
    return {
      chartData,
      chartEvents: {
        select: () => {
          const gChart = ref();
          const chart = gChart.chartObject;
          const selection = chart.getSelection();
          console.log(selection[0]);
        },
      },
    };
  },
};
</script>

解决方案 #

你的代码存在两个关键问题：

1. 在select事件回调内重新声明const gChart = ref()，这不是模板中绑定的组件引用，无法获取到实际的图表实例。
2. vue-google-charts 1.x版本中，图表实例的属性名已从chartObject改为chart，需要调整获取路径。

修改后的代码如下：

<template>
  <div>
    <GChart
      type="Timeline"
      :data="chartData"
      :settings="{ packages: ['timeline'] }"
      :events="chartEvents"
      ref="gChart"
    />
  </div>
</template>
<script>
import { GChart } from "vue-google-charts";
import { ref } from "vue";
const columns = [
  { type: "string", label: "Position" },
  { type: "string", label: "Name" },
  { type: "string", id: "style", role: "style" },
  { type: "date", label: "Start Date" },
  { type: "date", label: "End Date" },
];
const rows = [
  ["1", "test1", "#181818", new Date("2022-1-1"), new Date("2022-2-6")],
  ["2", "test2", "#e3d3b2", new Date("2022-1-5"), new Date("2022-1-20")],
  ["3", "test3", "#d3e932", new Date("2022-1-3"), new Date("2022-1-13")],
];
export default {
  name: "timeline",
  components: {
    GChart,
  },
  setup() {
    const chartData = [columns, ...rows];
    const gChart = ref(null); // 在setup顶层声明组件引用

    const chartEvents = {
      select: () => {
        if (!gChart.value) return;
        const chart = gChart.value.chart; // 获取1.x版本的图表实例
        const selection = chart.getSelection();
        if (selection.length === 0) return;
        
        const selectedItem = selection[0];
        const dataTable = chart.getDataTable();
        // 获取选中行的所有数据
        const rowData = [];
        for (let i = 0; i < dataTable.getNumberOfColumns(); i++) {
          rowData.push(dataTable.getValue(selectedItem.row, i));
        }
        console.log("选中条目数据:", rowData);
        console.log("选中行索引:", selectedItem.row);
      },
    };

    return {
      chartData,
      chartEvents,
      gChart
    };
  },
};
</script>

关键修改点 #

• 在setup顶层声明gChart ref，绑定到模板中的组件引用。
• 事件回调中通过gChart.value.chart获取图表实例（替代旧版本的chartObject）。
• 通过chart.getDataTable().getValue(row, column)获取选中条目的具体数据，遍历列可拿到整行数据。

内容的提问来源于stack exchange，提问作者Dong Gil Lee