Javascript 带有NextJS和highcharts的气泡图

简短：我正在将NextJS与highcharts react官方软件包一起使用。需要使它与海图更多的工作，但我不能

-下面有更详细的解释

我正在用NextJS制作一个应用程序，它主要是React。我已经成功地使用了许多不同的图表项目，如直线/样条线/面积/散点/柱等。现在我需要添加气泡图，因此我似乎更需要highcharts

我试着按照以下建议使用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>
        );
    }
}

我在官方的highcharts react软件包中发布了这一点，另一位用户跟进了这一点：

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

下面的步骤使它工作，但它不是理想的，我仍然希望有一个更好的解决方案

我必须执行以下导入，但注释掉HC\u more回调调用。 执行npm启动并导航到包含我的气泡图的页面。它将崩溃，给出错误17，如上所述： 当React和Node仍在监视时，我发布了前面注释掉的行： 然后它就起作用了

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

---

此问题是由NextJS引起的，它是已知问题：

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

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

---

github上的问题：

此问题是由NextJS引起的，它是已知问题：

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

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

---

github上的问题：

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

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

我想添加一个示例来说明我的评论。但基本上你可以在文档中阅读：

但是请注意，解决方案将从服务器端渲染中排除该组件。由于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) }
      />
    );

---

我想添加一个示例来说明francis的评论。但基本上你可以在文档中阅读：

但是请注意，解决方案将从服务器端渲染中排除该组件。由于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) }
      />
    );

HC_more(HighCharts)

if (typeof Highcharts === 'object') {
    HC_More(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) }
      />
    );