用Nuxt绘制C3图

Question

背景

我目前正在使用Nuxt，需要在vue组件中呈现一些C3图表。C3正在调用库中的Window，因此它在C3库导入语句上抛出一个错误。

窗口未定义。

我知道这是因为它是服务器端呈现，它需要浏览器来访问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。

我正在呈现挂载中的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',
      },
    });
  },