javascript - Highcharts + Webpack 搞乱了图表渲染

Question

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

它特定于带有at的type图表，我使用了许多其他图表，并且所有图表在和模式之间都具有相同的渲染，正如预期的那样。areapolartruedevprod

这是我得到的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",

我知道这是一个奇怪而具体的问题，但任何线索都会非常感激，我被困住了。

标签： javascriptwebpackhighchartswebpack-4react-highcharts

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