如何在vue的时间线图上使用getSelection() -google图表。在合成api中

Question

我一直在尝试在类星体框架中使用vue-google图表来实现时间表图。图书馆是( vue3.0，类星体2.6，vue-google-图1.1.0 )

我仔细看过问题和说明，但没有完全适合我的环境。我发现的最后一个是https://codesandbox.io/s/vue-google-charts-events-handling-forked-hsivrq?file=/src/App.vue，它是vue2和vue-google-图表，一直工作到0.3.2。

我试图将其转换为vue3和复合api样式，但失败了，错误消息显示chartObject未定义。可能是vue-google-图表更新了，并有变化。

但我不知道在哪里能找到替代物品。我对js很陌生，所以不能让google的js代码改变为vue包装风格。

我用示例代码制作了代码，并成功地制作了一个事件来制作console.log，但是在我选择的图表上从条形图中获取数据仍然有问题。

确切地说，我想要的是从选定的条形图中获取行和列数据，然后才能操作图表。

<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>

这是代码https://codesandbox.io/s/vibrant-resonance-fbqosd?file=/src/components/TimeLine.vue:0-1154

我真的需要帮助..。

Answer 1

您可以通过直接调用函数来尝试，然后可以使用结果中的属性。

chartEvents: {
    select: () => {
        const selection = getSelection()
        console.log(selection)
    },
}