Question

简短：我正在将Next-JS与highcharts-react-official软件包一起使用。需要使其与highcharts结合使用，但更多，但我无法做到。

-在下面进行详细说明

我正在使用NextJS（主要是React）制作一个应用程序。我一直在成功使用许多不同的图表项目，例如折线/样条线/区域/散点图/列等。现在我需要添加气泡图，因此看来我需要更多的图表。

我尝试应用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)

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

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，因为“气泡”图不存在。但是，有了这些行，我得到了：

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）中发布了有关此内容的信息，另一个用户对此进行了跟进：

我得到同样的东西。我很想看看这是如何解决的。

以下步骤可以使其正常工作，但它并不理想，我仍然希望有一个更好的分辨率。


我必须进行以下导入（但请注释掉HC_more回调调用）。

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

执行npm start并导航到包含我的气泡图的页面。如上文所述，它将崩溃，给我错误17：

Error: Highcharts error #17:

React和Node仍在观看的同时，我发布了之前注释过的一行：

HC_more(HighCharts)

然后它起作用。

尽管无需执行上述步骤，但它应该从一开始就可以正常工作。

Answer 1

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

一个简单的解决方法是将所有模块放入一个if语句中，以检查Highcharts是对象还是函数：

'guards' => [
    'web' => [
        'driver' => 'session', 
        'provider' => 'users', 
    ], 

    'api' => [ 
        'driver' => 'passport', 
        'provider' => 'users', 
    ], 
],

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

Answer 2

我使用#identifier .class:hover::after { display: block !important; opacity: 1 !important; z-index: 2147483647 !important; color: rgba(255,255,0,1) !important; fill: rgba(0,0,0,1) !important; background: rgba(0,255,0,1) !important; background-blend-mode: normal !important; mix-blend-mode: normal !important; transform: none !important; content: "Tooltip"; }来渲染仅客户端渲染的代码。

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

3 个答案: