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

背景

我目前正在与Nuxt合作，需要在vue组件中渲染一些C3图表。 C3正在库中调用Window，因此它在C3库import语句上引发错误。



我知道这是在发生，因为它是服务器端渲染，并且需要浏览器访问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图表

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

问题

据我了解，if语句正在运行，并允许页面在跳过导入的同时继续呈现。但是现在它已经跳过了，一旦页面可供浏览器使用，我该如何实际渲染图形？在我当前的实现中，C3不再适用。

我在某一时刻看到的另一个错误是未定义生成器。我不知道这是从哪里来的，但以防万一。

最佳答案

根据您的描述，使用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',
      },
    });
  },

关于vue.js - 使用Nuxt渲染C3图表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50298026/