0

我正在尝试创建一个 Vue 数据表，其中包含特定数据列的谷歌图表。

由于太长的原因，我正在使用 python；特别是 jupyter 和 ipyvuetify。jupyer notebook 将由 voila 渲染并部署在heroku上。

我找到了一种使用 ipyvuetify实现数据表的方法。到目前为止效果很好，我什至可以在模板 traitlet 中编写 javascript 方法来自定义过滤。但是，我想将谷歌图表嵌入到数据表的一列中，为此我正在尝试使用 vue js 包装器vue-google-charts。

到目前为止，我什至无法显示一个简单的谷歌图表。这是我正在做的一个简化示例：

import ipyvuetify as v
import traitlets

class VuetifyTest(v.VuetifyTemplate):
    template = traitlets.Unicode(TEMPLATE)

VuetifyTest()

TEMPLATE以下 HTML 字符串在哪里：

<script>

console.log("This message won't display in the console!");
var VueGChart = require("vue-google-charts");

module.exports = {
    components: {
        'GChart': VueGChart.GChart
    },
    data: () => ({
      chartData: [
        ["Year", "Sales", "Expenses", "Profit"],
        ["2014", 1000, 400, 200],
        ["2015", 1170, 460, 250],
        ["2016", 660, 1120, 300],
        ["2017", 1030, 540, 350]
      ],
      chartOptions: {
        chart: {
          title: "Company Performance",
          subtitle: "Sales, Expenses, and Profit: 2014-2017"
        }
      },
    })
}

</script>
<template>
    <h1>Example Google Chart</h1>
    <GChart
        type="ColumnChart"
        :data="chartData"
        :options="chartOptions"
    />
</template>

但是，当我尝试此操作时，我在浏览器控制台中收到以下错误：

ReferenceError: VueGChart is not defined

我已经尝试了十几种不同的方式在我的 ipyvuetify 模板中嵌入 Google Charts，包括通过添加直接使用 Google Charts API，<script src=...>但似乎没有任何效果。更重要的是，该行上方的代码module.exports = {似乎没有执行，使用console.log. 但是，我知道一个事实，如果我用require导入替换该行，那么它会抱怨不是一个模块。

我完全被难住了。任何人都可以建议如何以任何必要的方式让外部 js 库与 ipyvuetify 一起工作吗？

谢谢

4

0 回答 0