使用 NextJS 和 highcharts-react-official 的气泡图

Question

简而言之：我将 Next-JS 与 highcharts-react-official 包一起使用。需要让它与 highcharts-more 一起工作，但我做不到。

-- 下面有更长的解释

我正在用 NextJS 制作一个应用程序，主要是 React。我已经成功地使用了许多不同的图表项目，例如 line/spline/area/scatter/column 等。现在我需要添加气泡图，因此看来我需要 highcharts-more。

我尝试像这样应用 HighchartsMore（如 https://github.com/highcharts/highcharts-react/issues/16 所建议）：

import Highcharts from 'highcharts'
import HC_More from 'highcharts/highcharts-more'
import HighchartsReact from 'highcharts-react-official'

HC_More(Highcharts)

并且我没有更改渲染方法中图表的代码，因为它适用于所有其他图表类型：

class BaseChart extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <figure className="figure w-100">
                <HighchartsReact 
                    highcharts={Highcharts}
                    options={this.props.options}
                />
                <style jsx>{`
                    figure {
                        margin-top: 3em;
                        margin-bottom: 3em;
                    }
                `}</style>
            </figure>
        );
    }
}

没有 HC_More 行，我得到错误 #17，因为 'bubble' 图表不存在。但是，有了这些线，我得到：

Uncaught (in promise) Error: n is not a function
    at C:\(...)\node_modules\highcharts\highcharts-more.js:8:280
    at C:\(...)\node_modules\highcharts\highcharts-more.js:11:268
    at Module../app/(...)/BaseChart.js

我在官方 highcharts-react 包 (https://github.com/highcharts/highcharts-react/issues/76) 中发布了有关此内容的信息，另一位用户跟进了此内容：

I get the same thing. I'm interested to see how this resolves.

The following steps make it work but it's not ideal and I would still like to have a better resolution.

I have to do the following imports (but comment out the HC_more callback invocation).

import Highcharts from 'highcharts' //core
import HighchartsReact from 'highcharts-react-official';
import HC_more from 'highcharts/highcharts-more.src' //module
// HC_more(Highcharts) //init module

Perform an npm start and navigate to the page containing my bubble chart. It will crash giving me error 17 as aorsten described above:

Error: Highcharts error #17:

While React and Node are still watching, I release the previously commented out line:

HC_more(HighCharts)

Then it works.

It should work right from the start though without having to do the above steps.

Answer 1

这个问题是由 NextJS 引起的，它是已知问题：https://github.com/zeit/next.js/wiki/FAQ#i-use-a-library-which-throws-window-is-undefined

简单的解决方法是将所有模块初始化放在 if 中，检查 Highcharts 是对象还是函数：

if (typeof Highcharts === 'object') {
    HC_More(Highcharts)
}

github 上的问题：https://github.com/highcharts/highcharts-react/issues/76

Answer 2

我使用 next/dynamic 渲染仅客户端渲染代码。

Answer 3

我想添加一个例子来说明弗朗西斯的评论。但基本上你可以在文档中阅读它：https://nextjs.org/docs/advanced-features/dynamic-import

但请注意，该解决方案会将组件排除在服务器端呈现之外。由于 Highcharts 库只能在浏览器中工作。如果有人找到更好的解决方案，请随时标记我。 :)

const MyChart = dynamic(() => const MyChart = dynamic(() => import("components/Shared/Charts/singleStackedBarChart"),
 { ssr: false }
);
    
// App.jsx
const App = ({ ...props }) => {
    return (<>
        <MyChart ... />
    </>);
}


// MyChart.jsx
import Highcharts from "highcharts";
import highchartsAccessibility from "highcharts/modules/accessibility";
import { default as exportingHighcharts } from "highcharts/modules/exporting";
import more from "highcharts/highcharts-more";
import HighchartsReact from "highcharts-react-official";
import { theme } from "./Common/globalChartSettings";

if (typeof Highcharts === "object") { // 
  highchartsAccessibility(Highstocks);
  exportingHighcharts(Highstocks);
  more(Highstocks);
}

const MyChart = ({ ...props }) => {
    const options = ...;
    
    return (
      <HighchartsReact
        highcharts={Highstocks}
        options={Highcharts.merge(options, theme)} <-- This was causing problems on the server side         allowChartUpdate={true}
        updateArgs={[true, true, true]}
        constructorType={"stockChart"}
        containerProps={containerProps}
        callback={(chart: any) => onCreation(chart) }
      />
    );

使用 NextJS 和 highcharts-react-official 的气泡图

Bubble chart with NextJS and highcharts-react-official

javascript

highcharts

reactjs

next.js