Ошибка при использовании Canvas JS в приложении Next JS - PullRequest
Новая
       19

Ошибка при использовании Canvas JS в приложении Next JS

0 голосов
/ 06 апреля 2020

Я хочу использовать Canvas JS в своем приложении Next JS. Я скачал и поместил файлы canvas js .react. js и canvas js .min. js в папку страниц, а затем импортировал их на страницу, подобную этой 

import React from 'react'
import CanvasJSReact from './canvasjs.react';
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;

class Home extends React.Component {
    render () {
        return (
            ...
        )
    }
}

Однако, когда я запускаю сайт, я получаю сообщение об ошибке 

ReferenceError: document is not defined
    at /project/.next/server/static/development/pages/index.js:2824:11
    at Object../pages/canvasjs.min.js (/project/.next/server/static/development/pages/index.js:13235:3)
    at __webpack_require__ (/project/.next/server/static/development/pages/index.js:23:31)
    at Module../pages/canvasjs.react.js (/project/.next/server/static/development/pages/index.js:14127:16)
    at __webpack_require__ (/project/.next/server/static/development/pages/index.js:23:31)
    at Module../pages/index.js (/project/.next/server/static/development/pages/index.js:14209:73)
    at __webpack_require__ (/project/.next/server/static/development/pages/index.js:23:31)
    at Object.4 (/project/.next/server/static/development/pages/index.js:14351:18)
    at __webpack_require__ (/project/.next/server/static/development/pages/index.js:23:31)
    at /project/.next/server/static/development/pages/index.js:91:18
    at Object.<anonymous> (/project/.next/server/static/development/pages/index.js:94:10)
    at Module._compile (internal/modules/cjs/loader.js:1157:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1177:10)
    at Module.load (internal/modules/cjs/loader.js:1001:32)
    at Function.Module._load (internal/modules/cjs/loader.js:900:14)
    at Module.require (internal/modules/cjs/loader.js:1043:19)

Что я делаю не так?

1 Ответ

0 голосов
/ 19 апреля 2020

Попробуйте импортировать его динамически

Например, если вы хотите отобразить его на странице, или импортировать его динамически: 

import dynamic from 'next/dynamic'
const PieChart = dynamic(() => import("path/to/your/chartFile"))

И вызывать его как любой другой компонент: <PieChart />

Наконец, в вашем файле диаграммы. js: 

import React, {Component} from "react";

import CanvasJSReact from './canvasjs.react'

class PieChart extends Component {
    render() {
        const options = {
            animationEnabled: true,
            title: {
                text: "Customer Satisfaction"
            },
            subtitles: [{
                text: "71% Positive",
                verticalAlign: "center",
                fontSize: 24,
                dockInsidePlotArea: true
            }],
            data: [{
                type: "doughnut",
                showInLegend: true,
                indexLabel: "{name}: {y}",
                yValueFormatString: "#,###'%'",
                dataPoints: [
                    { name: "Unsatisfied", y: 5 },
                    { name: "Very Unsatisfied", y: 31 },
                    { name: "Very Satisfied", y: 40 },
                    { name: "Satisfied", y: 17 },
                    { name: "Neutral", y: 7 }
                ]
            }]
        }

        var CanvasJSChart = CanvasJSReact.CanvasJSChart;

        return (
        <div>
            <CanvasJSChart options = {options}
                /* onRef={ref => this.chart = ref} */
            />
            {/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}
        </div>
        );
    }
}
export default PieChart;
...