Billboard.js: $$.generatePoint 不是函数

Question

我正在尝试使用 billboard.js 作为 d3.js 的简单替代方法来显示一些折线图。不幸的是，我似乎无法在我自己的存储库中使用它，也无法在普通 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>

以及我从我的开发工具中得到的错误代码：

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。

Answer 1

基于 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

Billboard.js: $$.generatePoint 不是函数

Billboard.js: $$.generatePoint is not a function

javascript

typescript

vue.js

billboard.js