vue.js - 使用Nuxt渲染C3图表

Question

背景

我目前正在使用 Nuxt，需要在 vue 组件中渲染一些 C3 图表。 C3 正在库中调用 Window，因此它会在 C3 库导入语句中引发错误。

window is not defined

我知道会发生这种情况，因为它是服务器端渲染，需要浏览器访问 window。我还知道我需要告诉 Nuxt 允许这个特定的组件或组件的一部分在浏览器中呈现。

我知道 C3 是在 D3 之上构建的，所以我想我也会尝试加载它。我读到这就是您处理非服务器端渲染库的方式。

示例代码

nuxt.config.js

 plugins: [
    { src: '~plugins/d3', ssr: false },
    { src: '~plugins/c3', ssr: false },
  ],

build: {
    vendor: ['d3', 'c3'],
  },

/plugins/d3.js

import * as d3 from 'd3';

export default d3;

/plugins/c3.js

import c3 from 'c3';

export default c3;

一旦我添加了这些配置，我就会移动到我想在其中使用它们的组件，

import * as d3 from 'd3';
import c3 from 'c3';
import 'c3/c3.css';

这允许 D3 工作。但是当我导入 C3 时，它仍然会抛出相同的错误。所以，我读到我应该试试这个，

   let c3 = null;
    if (process.browser) {
        c3 = require('c3');
    }

这仍然不起作用，C3 仍然抛出错误。新的错误是，

c3 is not defined.

我在 mount 中渲染 C3 图表

  mounted() {
    const chart = c3.generate({
      bindto: '#result-chart',
      data: {
        columns: [['data1', 30], ['data2', 120]],
        type: 'pie',
      },
    });
  },

问题

据我所知，if 语句正在运行并允许页面在跳过导入的同时继续呈现。但是现在它已经跳过了它，一旦页面对浏览器可用，我如何实际呈现图形？在我当前的实现中，C3 永远不在范围内。

我曾经看到的另一个错误是生成器未定义。我不知道那是从哪里来的，但以防万一。

Answer 1

根据您的描述，您通过使用 nuxt 插件和在您的组件中导入了 d3 和 c3 两次。我想你可以通过以下方式做到这一点:

/plugins/chart.js

import * as d3 from 'd3';
import c3 from 'c3';

export default (ctx, inject) => {
  inject("d3", d3);
  inject("c3", c3);
};

/nuxt.config.js

plugins: [
  { src: "~/plugins/chart", ssr: false }
]

inject方法会将 d3 和 c3 对象插入到 nuxt 上下文中，以便您可以使用 this.$d3 调用它们和 this.$c3 ，例如:

  mounted() {
    const chart = this.$c3.generate({
      bindto: '#result-chart',
      data: {
        columns: [['data1', 30], ['data2', 120]],
        type: 'pie',
      },
    });
  },