Billboard.js：$$generatePoint不是函数

问题描述

我正在尝试使用billboard.js作为d3.js的一种简单替代方案来显示某些折线图。不幸的是，我似乎无法使其在自己的存储库中运行，也无法使其在Vanilla Vue项目中运行。

有人可以告诉我是否需要特殊的东西来使billboard.js与Vue结合起来运行吗？

我的App.vue：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <div id="chart">
  </div>
  </div>
</template>

<script lang="ts">
import { Component,Vue } from 'vue-property-decorator';
import { bb } from 'billboard.js';

@Component
export default class App extends Vue {
  mounted() {
    console.log(this);
    console.log(bb);
    bb.generate({
      bindto: '#chart',data: {
        columns: [
          ['data1',30,200,100,170,150,250],],types: {
          data1: 'line',data2: 'area-spline',},colors: {
          data1: 'red',data2: 'green',});
  }
}
</script>

从我的devtools得到的错误代码：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: "TypeError: $$.generatePoint is not a function"

found in

---> <App> at src/App.vue
       <Root>

对于它的价值，我正在为该项目使用以下npm版本：

  "dependencies": {
    "billboard.js": "^2.0.3","core-js": "^3.6.5","vue": "^2.6.11","vue-class-component": "^7.2.3","vue-property-decorator": "^8.4.2"
  },

我已经创建了a small repository并使用了重现此问题所需的最少代码。

解决方法

基于docs，ESM构建的正确用法是：

// BEFORE:
//import { bb } from 'billboard.js';

// AFTER:
import bb,{ line,areaSpline } from 'billboard.js';


export default {
  mounted() {
    bb.generate({
      //...
      data: {
        types: {
          // BEFORE:
          //data1: 'line',//data2: 'area-spline',// AFTER:
          data1: line(),data2: areaSpline(),},}
    });
  }
}

此外，如果您打算在页面上具有该图表组件的多个实例，则应该通过ref将唯一的引用传递给图表的父元素：

<template>
  <!-- BEFORE: -->
  <!-- <div id="chart" /> -->

  <!-- AFTER: -->
  <div ref="chart" />
</template>

<script>
export default {
  async mounted() {
    // wait til next tick for `ref` to be available below
    await this.$nextTick();

    bb.generate({
      //...
      bindto: this.$refs.chart,});
  }
}
</script>

GitHub PR with fixes