使用 NextJS 和 highcharts-react-official 的气泡图
Bubble chart with NextJS and highcharts-react-official
简而言之:我将 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.
这个问题是由 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
我使用 next/dynamic
渲染仅客户端渲染代码。
我想添加一个例子来说明弗朗西斯的评论。但基本上你可以在文档中阅读它: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) }
/>
);
简而言之:我将 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.
这个问题是由 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
我使用 next/dynamic
渲染仅客户端渲染代码。
我想添加一个例子来说明弗朗西斯的评论。但基本上你可以在文档中阅读它: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) }
/>
);