Highcharts + Webpack 弄乱了图表渲染

Question

来自 webpack 的捆绑包呈现我的一个图表与我在开发模式下看到的热重载非常不同，并且无论如何都希望保持一致。

它特定于 type 图表 area，polar 在 true，我使用了许多其他图表，并且所有图表在 [= 之间具有相同的渲染15=] 和 prod 模式，正如预期的那样。

这是我在 dev 中得到的以及我希望从捆绑包中得到的：

这是我浏览 webpack 包后得到的：

这是应用于它的 highcharts 配置：

https://gist.github.com/sylv3r/6533e240107be42526ea77ea6ab5a13d

我使用的 webpack 配置：

https://gist.github.com/sylv3r/001a8c161a9dc580ee5d356a5e9e7155

包版本：

"highcharts": "^6.1.0",
"highcharts-more": "^0.1.7",
"highcharts-react-official": "^1.2.0",

"webpack": "^4.23.1",
"webpack-cli": "^3.1",
"webpack-dev-middleware": "^3.0.1",
"webpack-hot-middleware": "^2.21.2",

我知道这是一个奇怪且具体的问题，但我将不胜感激，我被卡住了。

Answer 1

"highcharts-more": "^0.1.7" 包已被弃用。您应该从 highcharts 文件夹中导入该模块：

import Highcharts from "highcharts/highstock";
import highchartsMore from "highcharts/highcharts-more";
import HighchartsReact from "highcharts-react-official";

highchartsMore(Highcharts);

现场演示： https://codesandbox.io/s/highcharts-react-demo-x10xx

Highcharts + Webpack 弄乱了图表渲染

Highcharts + Webpack messing up with chart rendering

javascript

highcharts

webpack

react-highcharts

webpack-4