使用带有 ipyvuetify 模板的外部 javascript 库

编程问答 2022-04-28

问题描述

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

由于太长的原因，我正在使用 python；特别是 jupyter 和 ipyvuetify。 jupyer 笔记本将由 voila 呈现并部署在 heroku 上。

我找到了实现 datatables using 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 的方法，包括通过添加 <script src=...> 直接使用 Google Charts API，但似乎没有任何效果。更重要的是，module.exports = { 行上方的代码似乎没有执行，这可以从使用 console.log 时缺少显示消息中得到证明。但是，我知道一个事实，如果我用导入替换 require 行，那么它会抱怨不是模块。

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

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ipyvuetifyjavascriptjupytervoilavue-component