如何解决使用带有 ipyvuetify 模板的外部 javascript 库
我正在尝试创建一个 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 举报,一经查实,本站将立刻删除。