Highcharts: "Highcharts non défini" en tant qu'import ES6 (navigateur, babel)

J'utilise webpack ng es6, et la seule façon dont je l'ai fait fonctionner est avec

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

Si quelqu'un sait comment faire fonctionner cela en utilisant la syntaxe d'importation, veuillez répondre

@ jon-a-nygaard

Merci pour le signalement ! Nous examinerons cela dès que possible. En attendant, vous pouvez jeter un œil à webpack avec un babel-loader comme alternative.

Salut, @jon-a-nygaard. Webpack est définitivement la voie à suivre. Nous allons l'utiliser dans le prochain projet. Ce projet est cependant un peu trop mature avec un certain nombre de bundles personnalisés de navigateur. Faites-moi savoir si vous comprenez cela.

D'accord. @ragefuljoe - le window.Highcharts = Highcharts était ce qu'il fallait. Cela fonctionne avec cette syntaxe d'importation !

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

Devrions-nous fermer ceci ou voulez-vous lier window.Highcharts à l'intérieur de votre code ? Je pense que cela devrait être ajouté à la doc principale ou quelque part.

@piggyslasher Heureux que la solution de contournement de @ragefuljoe vous

Je pense que cela devrait être ajouté à la doc principale ou quelque part.

En effet, j'ajouterai la solution de contournement sous forme de note à l'article Installer à partir de npm .

c'est cool @piggyslasher. une chance d'importer exporting.js avec la syntaxe d'importation ?

_mettre à jour_
voici toutes mes lignes liées aux highcharts, avec des cartes également nécessaires :

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

Existe-t-il un meilleur moyen de gérer les données cartographiques spécifiques ? Par exemple, je télécharge et j'inclus explicitement world.js ici (une autre option consiste à obtenir le json à partir du backend, ce que je pourrais faire)

J'ai exactement le même problème. Tout ce que je veux faire dans mon projet, c'est importer des « Highcharts » et en finir avec. Toutes les autres grandes bibliothèques JS "fonctionnent" immédiatement et je ne comprends pas pourquoi Highcharts ne le fait pas.

@jon-a-nygaard @TorsteinHonsi - cela pourrait valoir la peine de regarder comment Angular, lodash, underscore, ui-router et la myriade d'autres bibliothèques JS exposent leurs fonctionnalités pour browserify/webpack etc et le dupliquent dans highcharts.

@romiem Merci pour le conseil. Je travaille actuellement sur un correctif pour cela, je prévois de l'intégrer dans notre prochaine version de maintenance.

Salut,
J'ai un problème similaire avec highcharts 4.2.5. Je suis l'article Utiliser Highcharts pour créer des graphiques dans React .
Si j'utilise la syntaxe d'importation, c'est-à-dire import Highcharts from 'highcharts' , j'obtiens l'erreur Uncaught TypeError: _highcharts2.default[(this.props.type || "Chart")] is not a constructor .

Quand j'utilise la syntaxe suggérée par @ragefuljoe , ça marche ! Cependant, cela me fait penser, que diriez-vous d'utiliser 'highcharts/highstock au lieu de 'highcharts' ? eh bien, cela fonctionne avec la syntaxe d'importation. Quelle est la différence, ou est-ce que cela fonctionne de cette façon et j'ai mal utilisé l'importation ?

Voici le code complet (fonctionnant) :

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;

Merci @jon-a-nygaard de m'avoir informé de ce fil.

à la prise en charge améliorée de Webpack. J'ai fait toutes mes expériences React/Highsoft dans CodePen, mais je vais bientôt passer à un environnement de nœud approprié. Webpack/Import/ES6 est une bonne chose.

Réagir avec MDL et Highstock (test)

Y a-t-il des nouvelles de l'importation "simple" { Highcharts} depuis le module "highcharts" dans les applications typescript/angular 2 avec highcharts 5 ? Je n'ai trouvé que la doc sur "require Highcharts" qui est toujours un peu hacky...

@ jon-a-nygaard

@Skuriles Quel type de bundle (par exemple Webpack, Browserify) utilisez-vous ? Voici un exemple d'utilisation de Highcharts avec ES6 et Babelify

@jon-a-nygaard J'utilise SystemJs

@Skuriles Voici un exemple de la façon dont j'ai utilisé Highcharts avec SystemJS . J'espère que cela vous aidera, sinon faites-le moi savoir.

Je vais l'essayer dès que possible et poster la solution ici !
Merci beaucoup pour votre exemple !!

J'ai modifié mon code en raison de votre proposition, mais j'obtiens toujours des erreurs de saisie d'intellisens et le compilateur gulp-typescript génère également des erreurs. Cela fonctionne dans l'application compilée mais ce n'est pas satisfaisant.

importer des Highcharts depuis 'highcharts/highstock.js' est encore un module inconnu.

J'ai aussi essayé avec le plugin typescript-babel mais cela lance le compilateur pour d'autres choses.

Donc, finalement, je suis allé en arrière pour charger le fichier highstock.js directement sans systemjs et déclarer simplement Highcharts dans le fichier TS pour éviter les erreurs de compilation.

J'attends un vrai module ES6 mais pour l'instant nous pouvons vivre comme ça car nous allons probablement passer à des versions précompilées et groupées sans systemjs pour la sortie !

@jon-a-nygaard Je ne parviens pas à afficher mon highchart dans mon application recat. Tout ce que j'obtiens, c'est un écran vide. Voici ce que je fais pour mon 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;

et j'utilise ce highchart de la manière suivante dans mon application :

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

Toute aide appréciée. Merci d'avance.

Jusqu'à présent, je l'ai fait fonctionner.

import Highcharts from "highcharts";

systemjs
carte:
'highcharts': "npm:highcharts"
emballer:
'highcharts': { main: "highstock", defaultExtension: "js"}

seul problème :
le compilateur renvoie des erreurs car @types/highharts a le problème suivant :
Property 'StockChart' does not exist on type 'Static'.

mais l'application fonctionne au moins

Au cas où quelqu'un en aurait besoin avec Rollup

J'ai la configuration suivante qui fonctionne.

Dans un fichier vendor.ts j'ai

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

Ce qui crée un ensemble de fournisseurs.
Puis dans mon app.rollup.js (fichier de configuration pour créer mon app bundle).

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

Et enfin dans mon application je peux utiliser

import Highcharts from 'highcharts/highcharts';

@jon-a-nygaard Malheureusement, votre exemple ne fonctionne pas avec le compilateur dactylographié. 'highchart' has no default export erreur

@Skuriles merci votre approche fonctionne mais j'ai fait un simple et simple ..

importer des « highcharts » ;

(en plus de vos autres suggestions)

Merci

Aucune des solutions ci-dessus n'a fonctionné pour moi dans la dernière version dactylographiée pour moi, celle ci-dessous a fonctionné :

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

Pour ceux d'entre vous qui travaillent avec Highcharts dans TypeScript, j'ai créé un exemple simple de configuration de travail . Ce qu'il faut retenir de cet exemple, c'est que le chargement de Highcharts doit être effectué comme suit :

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

La raison pour laquelle import Highcharts from 'highcharts' ne fonctionne pas, est qu'une telle syntaxe nécessite que nos modules exportent une valeur par défaut, ce qu'ils ne font pas. Pour ceux que cela intéresse, Typescript a une bonne documentation sur les différentes formes d'importation de fichiers .

Salut Jon, dans mon cas, cela fonctionne bien dans Google Chrome et affiche également les graphiques. Mais ces graphiques ne viennent pas dans le cas de mozilla et ne donnent également aucune erreur dans la console. Donnez-moi une solution comment résoudre.

Toute personne qui résout ce problème s'il vous plaît aider

Salut @Sandipj38 ,

Cela ne ressemble pas à un problème avec les importations ES6. Pourriez-vous créer un sujet sur notre forum ou nous envoyer un email ( détails ) ? Merci!

Bonjour,
J'utilise webpack, avec react et highcharts. j'obtiens une erreur avec

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

J'ai parcouru ce problème et je n'ai pas trouvé de solution. J'ai essayé toutes les permutations et combinaisons possibles d'import/require 'highcharts', 'highcharts/highstock,'highcharts.js' et maintenant je n'ai plus d'options.

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;

Pourriez-vous s'il vous plaît m'aider ici?

@satishrao84 cela pourrait valoir la peine de regarder https://github.com/kirjs/react-highcharts , cela a bien fonctionné pour moi

J'ai pu faire fonctionner Highcharts et Highstock avec les importations ES6 à l'aide de webpack avec succès avec un thème ainsi que le tout contenu dans le fichier bundle, js.

J'ai écrit sur le problème sur le référentiel highcharts-ng ici https://github.com/pablojim/highcharts-ng/issues/624

La solution consistait à importer highcharts/highstock, puis theme, puis highcharts-ng dans mon application principale, puis ajouter Highcharts dans un bundle global dans ma configuration webpack et cela a fonctionné.

*Remarque : j'ai dû passer à highcharts-ng v1.0.1 car la 1.1.0 inclut Highcharts 5 et force l'utilisation du produit Highcharts. J'avais besoin de Highstock et le retour à la v1.0.1 n'inclut pas la dépendance Highcharts, donc je pouvais utiliser Highstock v6 et mon thème dans mon bundle sans double ou triple chargement de Highcharts côté client.

EDIT : j'ai également pu faire fonctionner l'exportation avec la syntaxe d'importation 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);

Et dans webpack.config, configurez le Highcharts global pour le thème.

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

@ satishrao84 j'obtenais la même erreur lorsque j'essayais d'utiliser un graphique highstock mais ne chargeais que des highcharts. vérifiez dans votre webpack bundle.js pour Highstock JS et voyez s'il y est emballé ou si Highcharts l'est à la place. voir mon commentaire ci-dessus sur le chargement de highstock avec import. J'ai highstock et un thème fonctionnant avec highcharts-ng, mais je ne parviens pas à faire fonctionner l'exportateur, même s'il se trouve dans le bundle.js et que Highcharts est injecté, l'icône de menu ne s'affiche pas encore sur mon graphique.

Ce problème est maintenant considéré comme clos, en raison des mises à jour effectuées dans le commit 7da7361. Ce commit améliore notre documentation sur la façon de charger Highcharts dans ES6, que j'ai considéré comme le problème récurrent ici. J'appliquerai également ces mises à jour à

Au fil du temps, ce problème est devenu un mélange de nombreux problèmes différents, mais similaires, qui sont devenus un peu difficiles à suivre. Si quelqu'un rencontre un problème similaire à ce sujet, veuillez créer un nouveau problème, car il sera alors plus facile de vous apporter l'aide appropriée.

Pour ceux qui attendent nos modules ES6, veuillez suivre le numéro 7186.

Si vous avez des questions sur ce sujet, n'hésitez pas à nous faire part de vos commentaires.

Meilleures salutations

il m'a fallu un certain temps pour le trouver mais je finis par utiliser expose

installer simple highcharts
puis
importer 'exposer?highcharts!highcharts/highcharts';

Le problème avec la solution de @ omer123456 est que vous obtiendrez une erreur

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

Une façon qui fonctionne est
dans votre js principal

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

Et puis ajoutez une nouvelle règle dans le webpack.config.js

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

Cela résout également le problème de Cannot read property 'Chart' of null

C'est mentionné sur ce fil, mais facile à manquer; la dernière version de highcharts a de vrais modules es6 qui fonctionnent comme prévu :

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

Bien qu'il semble que leur mention soit toujours absente des documents en ligne-