渲染使用Nuxt C3图表

Question

背景

我目前正在与Nuxt工作，需要渲染一些C3图表在VUE组件。 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/的3.就是

import * as d3 from 'd3';

export default d3;

/plugins/从3.就是

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

从你的描述，你导入D3和C3两次，用nuxt插件，并在您的组件。我认为你可以做到这一点通过以下方式：

/plugins/chart.就是

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

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

/怒消退.config.就是

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',
      },
    });
  },