Highcharts: “未定义 Highcharts”作为 ES6 导入（browserify，babel）

我正在使用 webpack ng es6，我让它工作的唯一方法是使用

var Highcharts = require('highcharts/highstock');
window.Highcharts = Highcharts;
require('highcharts/modules/exporting')(Highcharts);

如果有人知道如何使用导入语法来使用它，请回复

@乔恩·尼加德

感谢举报！ 我们会尽快调查此事。 同时，您可以查看带有babel-loader 的webpack作为替代方案。

嗨，@jon-a-nygaard。 Webpack 绝对是前进的方向。 我们将在下一个项目中使用它。 然而，这个项目有点太成熟了，有很多 browserify 自定义包。 如果你弄清楚了，请告诉我。

好的。 @ragefuljoe - window.Highcharts = Highcharts是需要的。 它适用于这种导入语法！

import Highcharts from 'highcharts/highstock';
window.Highcharts = Highcharts; //this line did the magic
import 'highcharts-ng';

我们应该关闭它还是你们想要在代码中绑定 window.Highcharts ？ 我认为这应该添加到主要文档或某处。

@piggyslasher很高兴有所帮助。 我将保留这个问题，以便我们可以改进使用 ES6 导入加载 Highcharts。

我认为这应该添加到主要文档或某处。

事实上，我会将解决方法作为注释添加到从 npm 安装文章中。

这很酷@piggyslasher。 使用导入语法导入exporting.js有运气？

_更新_
这是我所有与 highcharts 相关的行，还需要地图：

import Highcharts from 'highcharts/highstock';
window.Highcharts = Highcharts;
require('highcharts/modules/map')(Highcharts);
require('highcharts/modules/exporting')(Highcharts);
require('./pages/home-page/world'); //I'm downloading this from example links. any better way?
import 'highcharts-ng';

有没有更好的方法来处理特定的地图数据？ 例如，我正在下载并在此处明确包含 world.js（其他选项是从后端获取 json，我可能会这样做）

我有完全相同的问题。 我想要在我的项目中做的就是导入“Highcharts”并完成它。 所有其他主要的 JS 库都“开箱即用”，我不明白为什么 Highcharts 不能。

@jon-a-nygaard @TorsteinHonsi - 可能值得看看 Angular、lodash、下划线、ui-router 和无数其他 JS 库是如何公开它们的用于 browserify/webpack 等的功能并在 highcharts 中复制它的。

@romiem感谢您的提示。 我目前正在为此进行修复，计划将其纳入我们的下一个维护版本。

你好，
我在 highcharts 4.2.5 上遇到了类似的问题。 我正在关注使用 Highcharts 在 React 中创建图表的文章。
如果我使用导入语法，即import Highcharts from 'highcharts' ，我会收到错误Uncaught TypeError: _highcharts2.default[(this.props.type || "Chart")] is not a constructor 。

当我使用@ragefuljoe建议的语法时，它起作用了！ 然而，这让我想到，如何使用'highcharts/highstock而不是'highcharts' ？ 好吧，它适用于导入语法。 有什么区别，或者它被认为是那样工作而我错误地使用了导入？

这是完整的（工作）代码：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Highcharts from 'highcharts/highstock';
class Chart extends Component {
    constructor(props) {
        super(props);
    }
    // When the DOM is ready, create the chart.
    componentDidMount() {
        // Extend Highcharts with modules
        if (this.props.modules) {
            this.props.modules.forEach(function (module) {
                module(Highcharts);
            });
        }
        this.chart = new Highcharts[this.props.type || "Chart"](
            this.props.container, 
            this.props.options
        );
    }
    //Destroy chart before unmount.
    componentWillUnmount() {
        this.chart.destroy();
    }
    //Create the div which the chart will be rendered to.
    render() {
        return React.createElement('div', { id: this.props.container });
    }
}
export default Chart;

感谢 @jon-a-nygaard 让我知道这个线程。

👍 增强对 Webpack 的支持。 我一直在 CodePen 中做我所有的 React/Highsoft 实验，但很快就会转移到合适的节点环境。 Webpack/Import/ES6 是好东西。

与 MDL 和 Highstock 反应（测试）

在带有 highcharts 5 的打字稿/angular 2 应用程序中，是否有关于从“highcharts”模块中“简单”导入 { Highcharts} 的任何消息？ 只找到了关于“require Highcharts”的文档，这总是有点老套……

@乔恩·尼加德

@Skuriles您使用的是什么类型的打包器（例如 Webpack、Browserify）？ 这是一个如何在 ES6 和 Babelify 中使用

@jon-a-nygaard 我正在使用 SystemJs

@Skuriles这是我如何将 Highcharts 与 SystemJS 一起使用的示例。 希望它有帮助，如果没有请让我知道。

将尽快尝试并在此处发布解决方案！
非常感谢你的例子！！

由于您的提议，我更改了我的代码，但我仍然收到来自智能感知器的打字稿错误，并且 gulp-typescript 编译器也会抛出错误。 它在编译的应用程序中工作，但这并不令人满意。

import Highcharts from 'highcharts/highstock.js" 仍然是一个未知模块。

我也尝试过使用 typescript-babel 插件，但这会引发其他事情的编译器。

所以最后我回去直接加载highstock.js文件，不用systemjs，只在TS文件中声明Highcharts，防止编译出错。

我等待一个真正的 ES6 模块，但现在我们可以像它一样生活，因为我们可能会切换到没有 systemjs 的预编译、捆绑版本来发布！

@jon-a-nygaard 我无法在我的 recat 应用程序中呈现我的高图。 我得到的只是一个空白屏幕。 这就是我为 highchart 所做的：

import React, {Component, PropTypes} from 'react';
import Highcharts from 'highcharts/highcharts';
import styles from './styles/linechart.css';
import cssModules from 'react-css-modules';
import request from 'axios';
import moment from 'moment';

@cssModules(styles)
class LineChart extends Component {
    constructor(props) {
        super(props);
    }

    static propTypes = {
        modules: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.object,
            PropTypes.array
        ]),
        container: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.object,
            PropTypes.array,
        ]),
        options: PropTypes.oneOfType([
            PropTypes.object,
            PropTypes.array
        ]),
    };

    highchartsModules() {
        if (this.props.modules) {
            this.props.modules.forEach(function(module) {
                module(Highcharts);
            });
        }
    }

    componentDidMount() {

        const inComing = [];
        const outGoing = [];
        const xAxisData = [];

        request.get('/dashboard/hourly', {
            params: {
                timezone: moment().utcOffset(),
                date:     '2016-07-06'
                // date:     moment(new Date()).format('YYYY-DD-MM')
            }
        }).then(response => {
                response.data.forEach(item => {
                    const flattened = {};
                    const out = {};
                    flattened.name = item.date;
                    flattened.y = item.inCount;
                    out.name = item.date;
                    out.y = item.outCount;
                    xAxisData.push(item.hour);
                    inComing.push(flattened);
                    outGoing.push(flattened);
                });
            });

            console.log('InComing data: ', inComing);
            console.log('OutGoing data: ', outGoing);
            console.log('X Axis data: ', xAxisData);

            const chartOptions = {
                tooltip: {
                    borderRadius:    20,
                    backgroundColor: 'rgba(18, 21, 23, 0.9)',
                    style:           {
                        color: 'white',
                    },
                    shadow: false,
                },
                title: {
                    text: ''
                },
                subTitle: {
                    text: ''
                },
                xAxis: {
                    categories: xAxisData,
                    labels:     {
                        enabled: false
                    },
                    crosshair: {
                        width:     1,
                        dashStyle: 'Dash',
                        color:     'black',
                        snap:      false,
                    },
                    tickInterval: 2
                },
                legend: {
                    enabled: false,
                },
                series: [{
                    name: 'Incoming Calls',
                    data: inComing
                }, {
                    name: 'Outgoing Calls',
                    data: outGoing
                }
            ]
        };

        this.highchartsModules();
        console.log('CHART OPTIONS: ', chartOptions);
        if (typeof window !== 'undefined') {
            this.chart = new Highcharts['Chart'](
                this.props.container,
                chartOptions
            );
        }
    }

    render() {
        const { container } = this.props;
        return (
            // <div styleName="chart">
                <div class="chart" id={container} />
            // </div>
        );
    }
}

export default LineChart;

我在我的应用程序中以下列方式使用这个 highchart：

<LineChart container="chart" type="chart" />

任何帮助表示赞赏。 提前致谢。

到目前为止，我已经开始工作了。

import Highcharts from "highcharts";

系统js
地图：
'highcharts': "npm:highcharts"
包裹：
'highcharts': { main: "highstock", defaultExtension: "js"}

唯一的问题：
编译器抛出错误是因为@types/highharts 有以下问题：
Property 'StockChart' does not exist on type 'Static'.

但该应用程序至少有效

如果有人可能需要使用 Rollup

我有以下正在运行的设置。

在 vendor.ts 文件中，我有

import * as _highcharts from 'highcharts/highcharts';
...
export default {
   ...
   _highcharts
};

这会创建一个供应商捆绑包。
然后在我的 app.rollup.js（用于创建我的应用程序包的配置文件）中。

export default {
    entry: 'src/main.ts',
    dest: 'bundles/app.js',
    format: 'iife',
    sourceMap: true,
    moduleName: 'app',
    plugins: [
        ...
    ],
    external: [
        'highcharts/highcharts'
    ],
    globals: {
        ...
        'highcharts/highcharts': 'vendor._highcharts'
    }
};

最后在我的应用程序中我可以使用

import Highcharts from 'highcharts/highcharts';

@jon-a-nygaard 不幸的是，您的示例不适用于打字稿编译器。 我收到'highchart' has no default export错误。

@Skuriles感谢您的方法有效，但我做了一个简单明了的 ..

导入'highcharts'；

（除了你的其他建议）

谢谢

在对我来说最新的打字稿版本中，上面的解决方案都没有对我有用，下面的解决方案确实有效：

import Highcharts from 'highcharts/highcharts.src.js';
import {default as HighchartsMore} from 'highcharts/highcharts-more.src.js';
HighchartsMore(Highcharts);

对于那些在 TypeScript 中使用 Highcharts 的人，我创建了一个简单的工作设置示例。 从这个例子中需要注意的是，加载 Highcharts 应该如下完成：

import * as Highcharts from 'highcharts'
import * as HighchartsMore from 'highcharts/highcharts-more.src.js'
HighchartsMore(Highcharts)

import Highcharts from 'highcharts'不起作用的原因是这样的语法要求我们的模块导出默认值，而他们没有。 对于那些感兴趣的人，Typescript 有一个关于各种形式的导入的很好的

嗨，Jon，就我而言，它在 google chrome 中运行良好，并且还显示了图表。 但是这些图表不会出现在 mozilla 的情况下，也不会在控制台中出现任何错误。 给我一些解决方案如何解决。

任何解决此问题的人请帮助

嗨@ Sandipj38 ，

这听起来不像 ES6 导入的问题。 您能否在我们的论坛上创建一个主题或给我们发送电子邮件（详细信息）？ 谢谢！

你好，
我正在使用带有 react 和 highcharts 的 webpack。 我收到一个错误

Uncaught TypeError: _highcharts2.default[(this.props.type || "Chart")] is not a constructor

我已经解决了这个问题，但找不到解决方案。 我已经尝试了 import/require 'highcharts'、'highcharts/highstock、'highcharts.js' 的所有可能的排列和组合，现在我完全没有选择。

var Chart = React.createClass({ componentDidMount: function () { // Extend Highcharts with modules if (this.props.modules) { this.props.modules.forEach(function (module) { module(Highcharts); }); } // Set container which the chart should render to. this.chart = new Highcharts[this.props.type || "Chart"]( this.props.container, this.props.options ); }, //Destroy chart before unmount. componentWillUnmount: function () { this.chart.destroy(); }, //Create the div which the chart will be rendered to. render: function () { return React.createElement('div', { id: this.props.container }); } }), element2;

你能帮我一下吗？

@satishrao84可能值得一看https://github.com/kirjs/react-highcharts ，它对我来说效果很好

我能够使用 webpack 成功地将 Highcharts 和 Highstock 与 ES6 导入一起使用，并且所有主题都包含在 bundle,js 文件中。

我在https://github.com/pablojim/highcharts-ng/issues/624的 highcharts-ng repo 上写了这个问题

解决方案是在我的主应用程序中导入 highcharts/highstock，然后是主题，然后是 highcharts-ng，然后在我的 webpack 配置中的全局包中添加 Highcharts 并且它起作用了。

*注意：我不得不降级到 highcharts-ng v1.0.1，因为 1.1.0 包含 Highcharts 5 并强制使用 Highcharts 产品。 我需要 Highstock 并且恢复到 v1.0.1 不包含 Highcharts 依赖项，因此我可以在我的包中使用 Highstock v6 和我的主题，而无需在客户端加载两次或三次 Highcharts。

编辑：我能够使用导入 ES6 语法进行导出工作

import Highcharts from "highcharts/highstock";
import "../../js/highcharts.theme";
import "highcharts-ng";
import Exporter from "highcharts/modules/exporting";

// connect exporter to Highcharts bundle global
Exporter(Highcharts);

并在 webpack.config 中为主题设置 Highcharts 全局。

  plugins: [
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery",
      "window.jQuery": "jquery",
      Highcharts: "highcharts/highstock"
    })
  ]

@satishrao84当我尝试使用 highstock 图表但只加载 highcharts 时，我遇到了同样的错误。 在你的 webpack bundle.js 中检查 Highstock JS 并查看它是否被打包到其中，或者 Highcharts 是否被打包。 请参阅我上面关于通过导入加载 highstock 的评论。 我有 highstock 和一个使用 highcharts-ng 的主题，但无法让导出器工作，即使它在 bundle.js 中并且正在注入 Highcharts 菜单图标还没有出现在我的图表上。

由于在提交 7da7361 中完成了更新，此问题现在被视为已关闭。 这个提交改进了我们关于如何在 ES6 中加载 Highcharts 的文档，我认为这是这里的重复问题。 我还将这些更新应用到www.highcharts.com/docs 。

随着时间的推移，这个问题已经发展成为许多不同但相似的问题的混合体，这些问题变得有点难以追踪。 如果有人遇到与此主题类似的问题，请创建一个新问题，因为这样会更容易为您提供适当的帮助。

对于那些正在等待我们的 ES6 模块的人，请关注问题 #7186。

如果对此主题有任何疑问，请给我们评论。

此致

我花了一段时间才找到它，但我最终使用了 Exposure

简单安装highcharts
进而
import 'expose?highcharts!highcharts/highcharts';

@omer123456的解决方案的问题是你会得到错误

BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'expose-loader' instead of 'expose',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

一种有效的方法是
在你的主要 js 中

import Highcharts from 'highcharts';
import 'highcharts-ng'

然后在 webpack.config.js 中添加一条新规则

{
   test: require.resolve('highcharts'),
   use:[{
            loader: 'expose-loader',
            options: 'Highcharts'
   }]
}

这也解决了Cannot read property 'Chart' of null

在这个线程中提到过，但很容易错过； 最新版本的 highcharts 具有按预期工作的真实 es6 模块：

https://github.com/highcharts/highcharts/issues/7186

尽管在线文档中似乎仍然没有提及它们-