Highcharts: "Highcharts nicht definiert" als ES6-Importe (browserify, babel)

Ich verwende Webpack ng es6, und die einzige Möglichkeit, wie ich es zum Laufen gebracht habe, ist mit

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

Wenn jemand weiß, wie dies mithilfe der Importsyntax funktioniert, antworten Sie bitte

@ jon-a-nygaard

Danke fürs Melden! Wir werden dies so schnell wie möglich prüfen. In der Zwischenzeit könnten Sie sich alternativ Webpack mit einem Babel-Loader ansehen.

Hallo @jon-a-nygaard. Webpack ist definitiv der Weg nach vorne. Das werden wir im nächsten Projekt verwenden. Dieses Projekt ist jedoch mit einer ganzen Reihe von benutzerdefinierten Browserify-Bundles etwas zu ausgereift. Lass es mich wissen, wenn du das herausfindest.

Okay. @ragefuljoe - das window.Highcharts = Highcharts war das, was gebraucht wurde. Es funktioniert mit dieser Import-Syntax!

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

Sollen wir das schließen oder möchten Sie window.Highcharts in Ihren Code binden? Ich denke, dies sollte den Hauptdokumenten oder irgendwo hinzugefügt werden.

@piggyslasher Freut mich, dass dir der Workaround von

Ich denke, dies sollte den Hauptdokumenten oder irgendwo hinzugefügt werden.

Tatsächlich werde ich die Problemumgehung als Anmerkung zum Artikel Installieren von npm hinzufügen.

das ist cool @piggyslasher. Haben Sie Glück beim Importieren von exporting.js mit der Importsyntax?

_aktualisieren_
Hier sind alle meine Highcharts-bezogenen Zeilen, auch mit den benötigten Karten:

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';

Gibt es eine bessere Möglichkeit, mit den spezifischen Kartendaten umzugehen? ZB lade ich hier world.js herunter und füge sie explizit ein (andere Möglichkeit besteht darin, das Json aus dem Backend zu holen, was ich tun könnte)

Ich habe genau das gleiche Problem. Alles, was ich in meinem Projekt tun möchte, ist 'Highcharts' zu importieren und fertig zu sein. Alle anderen großen JS-Bibliotheken "funktionieren einfach", und ich kann nicht verstehen, warum Highcharts dies nicht tut.

@jon-a-nygaard @TorsteinHonsi - es könnte sich lohnen, sich anzusehen, wie Angular, Lodash, Underscore, ui-router und die unzähligen anderen JS-Bibliotheken ihre Funktionalität für browserify/webpack etc. bereitstellen und in Highcharts duplizieren.

@romiem Danke für den Tipp. Ich arbeite derzeit an einer Lösung für dieses Problem und plane, es in unsere nächste Wartungsversion aufzunehmen.

Hi,
Ich habe ein ähnliches Problem mit Highcharts 4.2.5. Ich folge dem Artikel
Wenn ich die Importsyntax verwende, also import Highcharts from 'highcharts' , erhalte ich den Fehler Uncaught TypeError: _highcharts2.default[(this.props.type || "Chart")] is not a constructor .

Wenn ich die von @ragefuljoe vorgeschlagene Syntax 'highcharts/highstock anstelle von 'highcharts' ? Nun, es funktioniert mit der Import-Syntax. Was ist der Unterschied, oder soll es so funktionieren und ich habe den Import falsch verwendet?

Hier ist der vollständige (funktionierende) Code:

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;

Danke @jon-a-nygaard, dass du mich über diesen Thread informiert hast.

👍 zur erweiterten Webpack-Unterstützung. Ich habe alle meine React/Highsoft-Experimente in CodePen durchgeführt, werde aber bald zu einer richtigen Node-Umgebung wechseln. Webpack/Import/ES6 ist gut.

Reagieren mit MDL & Highstock (Test)

Gibt es Neuigkeiten zum "einfachen" Import { Highcharts} aus dem "highcharts"-Modul in Typescript/Angular 2-Anwendungen mit Highcharts 5? Habe nur die Dokumentation zu "Highcharts erforderlich" gefunden, die immer etwas hackig ist...

@ jon-a-nygaard

@Skuriles Welche Art von Bundler (zB Webpack, Browserify) verwenden Sie? Hier ist ein Beispiel, wie Sie Highcharts mit ES6 und Babelify verwenden können

@jon-a-nygaard Ich verwende SystemJs

@Skuriles Hier ist ein Beispiel dafür, wie ich Highcharts mit SystemJS verwendet habe . Hoffe es hilft, wenn nicht lass es mich wissen.

Werde es so schnell wie möglich ausprobieren und die Lösung hier posten!
vielen dank für dein beispiel!!

Ich habe meinen Code aufgrund Ihres Vorschlags geändert, aber ich bekomme immer noch Typoskriptfehler von Intellisens und auch der gulp-typescript-Compiler gibt Fehler aus. Es funktioniert in der kompilierten App, aber das ist nicht zufriedenstellend.

Highcharts von 'highcharts/highstock.js' importieren ist noch ein unbekanntes Modul.

Ich habe es auch mit dem Typescript-Babel-Plugin versucht, aber dies wirft den Compiler für andere Dinge aus.

Also ging ich schließlich zurück, um die Datei highstock.js direkt ohne systemjs zu laden und Highcharts einfach in der TS-Datei zu deklarieren, um Kompilierungsfehler zu vermeiden.

Ich warte auf ein echtes ES6-Modul, aber im Moment können wir so leben, da wir wahrscheinlich auf vorkompilierte, gebündelte Versionen ohne systemjs für die Veröffentlichung wechseln werden!

@jon-a-nygaard Ich kann mein Highchart nicht in meiner Recat-App rendern. Ich bekomme nur einen leeren Bildschirm. Das mache ich für mein 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;

und ich verwende dieses Highchart wie folgt in meiner App:

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

Jede Hilfe geschätzt. Danke im Voraus.

Bisher habe ich es zum Laufen gebracht.

import Highcharts from "highcharts";

systemjs
Karte:
'highcharts': "npm:highcharts"
Paket:
'highcharts': { main: "highstock", defaultExtension: "js"}

einziges Problem:
Compiler gibt Fehler aus, weil @types/highharts das folgende Problem hat:
Property 'StockChart' does not exist on type 'Static'.

aber die App funktioniert zumindest

Falls es jemand mit Rollup braucht

Ich habe folgendes Setup, das funktioniert.

In einer Vendor.ts-Datei habe ich

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

Dadurch wird ein Vendor-Bundle erstellt.
Dann in meiner app.rollup.js (Konfigurationsdatei zum Erstellen meines App-Bundles).

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'
    }
};

Und endlich in meiner Anwendung kann ich verwenden

import Highcharts from 'highcharts/highcharts';

@jon-a-nygaard Leider funktioniert Ihr Beispiel nicht mit dem Typoskript-Compiler. Ich erhalte 'highchart' has no default export Fehler.

@Skuriles danke, dass Ihr Ansatz funktioniert, aber ich habe eine einfache und einfache ..

'Highcharts' importieren;

(zusätzlich zu Ihren anderen Vorschlägen)

Vielen Dank

Keine der obigen Lösungen hat bei mir in der neuesten Typoskript-Version funktioniert, bei mir hat die folgende funktioniert:

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

Für diejenigen unter Ihnen, die mit Highcharts in TypeScript arbeiten, habe ich ein einfaches Beispiel für ein funktionierendes Setup erstellt . Bei diesem Beispiel ist zu beachten, dass das Laden von Highcharts wie folgt erfolgen sollte:

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

Der Grund, warum import Highcharts from 'highcharts' nicht funktioniert, ist, dass eine solche Syntax erfordert, dass unsere Module eine Vorgabe exportieren, was sie nicht tun. Für Interessierte bietet Typescript eine gute Dokumentation zu verschiedenen Formen des Imports von .

Hallo Jon, in meinem Fall funktioniert es in Google Chrome einwandfrei und zeigt auch die Diagramme an. Aber diese Diagramme kommen nicht im Falle von Mozilla und geben auch keinen Fehler in der Konsole aus. Gib mir eine Lösung, wie ich das lösen kann.

Wer das löst bitte um Hilfe

Hallo @Sandipj38 ,

Es hört sich nicht nach einem Problem mit ES6-Importen an. Könnten Sie ein Thema in unserem Forum erstellen oder uns eine E-Mail senden ( Details )? Vielen Dank!

Hallo,
Ich benutze Webpack, mit React und Highcharts. Ich erhalte einen Fehler mit

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

Ich bin dieses Problem durchgegangen und konnte keine Lösung finden. Ich habe jede mögliche Permutation und Kombination von import/require 'highcharts', 'highcharts/highstock,'highcharts.js' ausprobiert und jetzt habe ich keine Optionen mehr.

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;

Könnten Sie mir hier bitte weiterhelfen?

@satishrao84 vielleicht lohnt sich ein Blick auf https://github.com/kirjs/react-highcharts , bei mir hat es gut funktioniert

Ich konnte Highcharts und Highstock mit ES6-Importen unter Verwendung von Webpack erfolgreich mit einem Thema arbeiten lassen, das alle in der Bundle-js-Datei enthalten ist.

Ich habe über das Problem im Highcharts-ng-Repo hier geschrieben https://github.com/pablojim/highcharts-ng/issues/624

Die Lösung bestand darin, Highcharts/Highstock, dann Theme, dann Highcharts-ng in meine Haupt-App zu importieren und dann Highcharts in einem Bundle global in meine Webpack-Konfiguration hinzuzufügen und es funktionierte.

*Hinweis: Ich musste auf highcharts-ng v1.0.1 downgraden, da 1.1.0 Highcharts 5 enthält und die Verwendung des Highcharts-Produkts erzwingt. Ich brauchte Highstock und die Rückkehr zu v1.0.1 beinhaltet keine Highcharts-Abhängigkeit, damit ich Highstock v6 und mein Thema in meinem Bundle verwenden konnte, ohne Highcharts auf der Clientseite doppelt oder dreifach zu laden.

BEARBEITEN: Ich konnte auch den Export mit der Import-ES6-Syntax zum Laufen bringen

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);

Und in webpack.config richten Sie die Highcharts global für das Thema ein.

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

@satishrao84 Ich habe den gleichen Fehler erhalten, als ich versucht habe, ein Highstock-Diagramm zu verwenden, aber nur Highcharts geladen. Checken Sie Ihr webpack Bundle.js für Highstock JS ein und sehen Sie, ob es darin gepackt ist oder ob es stattdessen Highcharts ist. siehe meinen Kommentar oben zum Laden von Highstock mit Import. Ich habe Highstock und ein Theme, das mit Highcharts-ng arbeitet, kann aber den Exporter noch nicht zum Laufen bringen, obwohl er in Bundle.js ist und Highcharts injiziert wird. Das Menüsymbol wird noch nicht in meinem Diagramm angezeigt.

Dieses Problem gilt nun aufgrund der Aktualisierungen in Commit 7da7361 als geschlossen. Dieser Commit verbessert unsere Dokumentation zum Laden von Highcharts in ES6, was meiner Meinung nach hier das wiederkehrende Problem darstellt. Ich werde diese Updates auch auf www.highcharts.com/docs anwenden.

Im Laufe der Zeit hat sich dieses Problem zu einer Mischung aus vielen verschiedenen, aber ähnlichen Problemen entwickelt, die etwas schwer zu verfolgen sind. Wenn jemand ein ähnliches Problem wie dieses Thema hat, erstellen Sie bitte ein neues Problem, da es einfacher ist, Ihnen dann entsprechende Hilfe zu leisten.

Für diejenigen, die auf unsere ES6-Module warten, folgen Sie bitte der Ausgabe #7186.

Sollten Sie Fragen zu diesem Thema haben, schreiben Sie uns bitte einen Kommentar.

Mit freundlichen Grüßen

Es hat eine Weile gedauert, bis ich es gefunden habe, aber am Ende benutze ich Expose

einfach Highcharts installieren
und dann
import 'expose?highcharts!highcharts/highcharts';

Das Problem mit der Lösung von @omer123456 ist, dass Sie einen Fehler erhalten würden

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

Eine Möglichkeit, die funktioniert, ist
in deinem Haupt-js

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

Und dann füge eine neue Regel in der webpack.config.js hinzu

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

Dies behebt auch das Problem von Cannot read property 'Chart' of null

Es wird in diesem Thread erwähnt, ist aber leicht zu übersehen; Die neueste Version von Highcharts hat echte es6-Module, die wie erwartet funktionieren:

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

Obwohl es den Anschein hat, dass ihre Erwähnung immer noch in den Online-Dokumenten fehlt-