Блог

Я пытаюсь создать таблицу данных Vue, которая содержит диаграммы Google для определенного столбца данных.

По причинам, которые слишком долго объяснять, я использую python; в частности, jupyter и ipyvuetify. Записная книжка jupyer будет отрисована voila и развернута на heroku.

Я нашел способ реализации таблиц данных с помощью ipyvuetify. До сих пор это хорошо работало, и я даже могу писать методы javascript в шаблоне, которые позволяют мне настраивать фильтрацию. Тем не менее, я хотел бы встроить диаграммы google в один из столбцов таблицы данных, и для этого я пытаюсь использовать оболочку vue js vue-google-диаграммы.

До сих пор я даже не могу заставить появиться простую диаграмму Google. Вот упрощенный пример того, что я делаю:

 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
 

Я перепробовал около дюжины различных способов встраивания Google Диаграмм в свой шаблон ipyvuetify, в том числе напрямую используя API Google Диаграмм, добавив <script src=...> , но, похоже, ничего не работает. Более того, похоже, что код над module.exports = { строкой не выполняется, о чем свидетельствует отсутствие отображаемого сообщения при использовании console.log . Однако я точно знаю, что если я заменю require строку импортом, то она будет жаловаться на то, что она не является модулем.

Я совершенно сбит с толку. Может ли кто-нибудь подсказать, как заставить внешние библиотеки js работать с ipyvuetify любым необходимым способом?

Спасибо