Highcharts: ES6のインポートとして「Highchartsが定義されていません」（browserify、babel）

私はwebpackng es6を使用していますが、それを機能させる唯一の方法は

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

インポート構文を使用してこれを機能させる方法を誰かが知っている場合は、返信してください

@ jon-a-nygaard

報告してくれてありがとう！ これについては、できるだけ早く調査します。 それまでの間、代わりにbabel-loaderを使用したご覧ください。

こんにちは、@ 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 @ ragefuljoeからの回避策があなたを助けてくれてうれしいです。 この問題は未解決のままにしておくので、ES6インポートを使用したHighchartsの読み込みの改善に取り組むことができます。

これはメインドキュメントかどこかに追加する必要があると思います。

確かに、 npmからのます。

かっこいい@piggyslasherです。 インポート構文でexporting.jsをインポートする運はありますか？

_アップデート_
これが私のハイチャート関連の行です。マップも必要です。

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、underscore、ui-router、およびその他の無数のJSライブラリが、browserify / webpackなどの機能を公開し、ハイチャートに複製する方法を確認する価値があるかもしれません。

@romiemヒントをありがとう。 現在、この修正に取り組んでおり、次のメンテナンスリリースに組み込む予定です。

やあ、
highcharts4.2.5でも同様の問題が発生しています。 Reactでチャートを作成するためにHighchartsを使用するという記事
インポート構文、つまり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を使用したReact（テスト）

highcharts5を使用するtypescript / angle 2アプリケーションの「highcharts」モジュールからの「simple」インポート{Highcharts}に関するニュースはありますか？ 常に少しハッキーな「requireHighcharts」に関するドキュメントのみが見つかりました...

@ jon-a-nygaard

@Skurilesどのタイプのバンドラー（Webpack、Browserifyなど）を使用していますか？ ES6とBabelifyでHighchartsを使用する方法の例を次に示します。

@ jon-a-nygaard私はSystemJを使用しています

@Skurilesこれは、SystemJSでHighchartsを使用した

できるだけ早く試して、ここに解決策を投稿します！
例をありがとうございました!!

あなたの提案によりコードを変更しましたが、それでもintellisensからtypescriptエラーが発生し、gulp-typescriptコンパイラーがエラーをスローします。 コンパイルされたアプリで動作しますが、これは満足のいくものではありません。

'highcharts /highstock.jsからHighchartsをインポートする "はまだ不明なモジュールです。

私もtypescript-babelプラグインで試しましたが、これは他のことのためにコンパイラをスローします。

最後に、systemjsを使用せずにhighstock.jsファイルを直接ロードし、コンパイルエラーを防ぐためにTSファイルでHighchartsを宣言しました。

私は実際のES6モジュールを待っていますが、リリースのためにsystemjsを使用せずに、プリコンパイルされたバンドルバージョンに切り替える可能性があるため、今のところはそのまま使用できます。

@ jon-a-nygaardリキャットアプリでハイチャートをレンダリングできません。 私が得ているのは空白の画面だけです。 これは私がハイチャートのために行っていることです：

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;

そして、私はこのハイチャートを私のアプリで次のように使用しています。

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

助けていただければ幸いです。 前もって感謝します。

これまでのところ、私はそれを機能させました。

import Highcharts from "highcharts";

systemjs
地図：
'highcharts': "npm:highcharts"
パッケージ：
'highcharts': { main: "highstock", defaultExtension: "js"}

唯一の問題：
@ types / highhartsには次の問題があるため、コンパイラはエラーをスローします。
Property 'StockChart' does not exist on type 'Static'.

しかし、アプリは少なくとも動作します

誰かがロールアップでそれを必要とするかもしれない場合に備えて

私は動作している次のセットアップを持っています。

私が持っている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残念ながら、あなたの例はtypescriptコンパイラでは機能しません。 'highchart' has no default exportエラーが発生します。

@Skurilesはあなたのアプローチが明快でした..

'highcharts'をインポートします;

（他の提案に加えて）

ありがとう

上記のソリューションはどれも、最新のtypescriptバージョンでは機能しませんでしたが、以下のソリューションは機能しました。

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にはさまざまな形式のインポートに関する優れた

こんにちはジョン、私の場合、それはグーグルクロームでうまく機能していて、チャートも表示しています。 しかし、これらのチャートは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を見る価値があるかもしれません、それは私にとってうまくいきました

テーマとすべてがbundle、jsファイルに含まれているwebpackを使用して、HighchartsとHighstockがES6インポートで正常に動作するようにすることができました。

私はここでhighcharts-ngリポジトリに問題について書きましたhttps://github.com/pablojim/highcharts-ng/issues/624

解決策は、メインアプリにhighcharts / highstock、テーマ、highcharts-ngの順にインポートし、webpack構成のグローバルバンドルにHighchartsを追加することでした。

*注：1.1.0にはHighcharts 5が含まれており、Highcharts製品が強制的に使用されるため、highcharts-ngv1.0.1にダウングレードする必要がありました。 Highstockが必要でしたが、v1.0.1に戻すとHighchartsの依存関係が含まれないため、クライアント側でHighchartsを2回または3回ロードしなくても、Highstockv6とテーマをバンドルで使用できました。

編集：インポート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ハイストックチャートを使用しようとしたときに同じエラーが発生しましたが、ハイチャートのみをロードしていました。 Webpack bundle.jsでHighstockJSをチェックインし、それにパックされているかどうか、または代わりにHighchartsがパックされているかどうかを確認します。 インポートでhighstockをロードすることについての上記の私のコメントを参照してください。 highstockとhighcharts-ngで動作するテーマがありますが、bundle.jsにあり、Highchartsが挿入されているにもかかわらず、エクスポーターを動作させることができません。メニューアイコンがチャートにまだ表示されません。

コミット7da7361で更新が行われたため、この問題は解決済みと見なされます。 このコミットにより、ES6でHighchartsをロードする方法に関するドキュメントが改善されます。これは、ここで繰り返し発生する問題であると私は考えています。 これらの更新をwww.highcharts.com/docsにも適用します。

時間が経つにつれて、この問題は多くの異なる、しかし類似した問題の混合に発展し、追跡するのが少し難しくなりました。 このトピックと同様の問題が発生している場合は、新しい問題を作成してください。適切なヘルプを提供する方が簡単です。

ES6モジュールを待っている方は、問題＃7186に従ってください。

このトピックに関して質問がある場合は、コメントをお寄せください。

よろしくお願いします

それを見つけるのに少し時間がかかりましたが、exposeを使用することになります

簡単なインストール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

動作する1つの方法は
あなたのメインの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

それらの言及はまだオンラインドキュメントから欠落しているように見えますが-