Highcharts: "Highcharts no definido" como importaciones de ES6 (browserify, babel)

Estoy usando webpack ng es6, y la única forma en que lo hice funcionar es con

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

Si alguien sabe cómo hacer que esto funcione usando la sintaxis de importación, responda

@ jon-a-nygaard

¡Gracias por informarnos! Analizaremos esto lo antes posible. Mientras tanto, puede echar un vistazo al paquete web con un cargador de babel como alternativa.

Hola, @ jon-a-nygaard. Webpack es definitivamente el camino a seguir. Lo usaremos en el próximo proyecto. Sin embargo, este proyecto es un poco demasiado maduro con bastantes paquetes personalizados de browserify. Avísame si averiguas esto.

Bueno. @ragefuljoe - el window.Highcharts = Highcharts era lo que se necesitaba. ¡Funciona con esta sintaxis de importación!

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

¿Deberíamos cerrar esto o quieren vincular window.Highcharts dentro de su código? Creo que esto debería agregarse a los documentos principales o en algún lugar.

@piggyslasher Me alegro de que la solución alternativa de @ragefuljoe te

Creo que esto debería agregarse a los documentos principales o en algún lugar.

De hecho, agregaré la solución alternativa como una nota al

eso es genial @piggyslasher. ¿Tuviste suerte importando exporting.js con sintaxis de importación?

_actualizar_
aquí están todas mis líneas relacionadas con highcharts, con mapas necesarios también:

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 una mejor manera de manejar los datos específicos del mapa? Por ejemplo, estoy descargando e incluyendo explícitamente world.js aquí (otra opción es obtener el json del backend, lo que podría hacer)

Tengo exactamente el mismo problema. Todo lo que quiero hacer en mi proyecto es importar 'Highcharts' y terminar. Todas las otras bibliotecas JS principales "simplemente funcionan" de fábrica y no puedo entender por qué Highcharts no lo hace.

@ jon-a-nygaard @TorsteinHonsi : podría valer la pena ver cómo Angular, lodash, subrayado, ui-enrutador y la miríada de otras bibliotecas JS exponen su funcionalidad para browserify / webpack, etc. y la duplican en gráficos altos.

@romiem Gracias por la sugerencia. Actualmente estoy trabajando en una solución para esto, planeando incluirlo en nuestra próxima versión de mantenimiento.

Hola,
Tengo un problema similar con Highcharts 4.2.5. Estoy siguiendo el artículo Use Highcharts para crear gráficos en React .
Si utilizo la sintaxis de importación, que es import Highcharts from 'highcharts' , obtengo el error Uncaught TypeError: _highcharts2.default[(this.props.type || "Chart")] is not a constructor .

Cuando uso la sintaxis sugerida por @ragefuljoe , ¡funciona! sin embargo, eso me hace pensar, ¿qué tal si usamos 'highcharts/highstock lugar de 'highcharts' ? bueno, funciona con la sintaxis de importación. ¿Cuál es la diferencia, o se cree que funciona de esa manera y estaba usando la importación incorrectamente?

Aquí está el código completo (en funcionamiento):

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;

Gracias @ jon-a-nygaard por informarme sobre este hilo.

👍 para mejorar la compatibilidad con Webpack. He estado haciendo todos mis experimentos de React / Highsoft en CodePen, pero pronto pasaré a un entorno de nodo adecuado. Webpack / Import / ES6 es bueno.

Reaccionar con MDL y Highstock (prueba)

¿Hay alguna novedad sobre la importación "simple" de {Highcharts} desde el módulo "highcharts" en aplicaciones mecanografiadas / angulares 2 con highcharts 5? Solo encontré los documentos sobre "require Highcharts", que siempre es un poco hacky ...

@ jon-a-nygaard

@Skuriles ¿Qué tipo de paquete (por ejemplo, Webpack, Browserify) estás usando? Aquí hay un ejemplo de cómo puede usar Highcharts con ES6 y Babelify

@ jon-a-nygaard Estoy usando SystemJs

@Skuriles Aquí hay un ejemplo de cómo usé Highcharts con SystemJS . Espero que te ayude, si no, avísame.

¡Lo probaré lo antes posible y publicaremos la solución aquí!
¡¡Muchas gracias por tu ejemplo !!

Cambié mi código debido a su propuesta, pero todavía obtengo errores de mecanografiado de intellisens y también el compilador gulp-mecanografiado arroja errores. Funciona en la aplicación compilada, pero esto no es satisfactorio.

import Highcharts from 'highcharts / highstock.js "sigue siendo un módulo desconocido.

También probé con el complemento typecript-babel, pero esto arroja el compilador para otras cosas.

Así que finalmente volví a cargar el archivo highstock.js directamente sin systemjs y simplemente declare Highcharts en el archivo TS para evitar errores de compilación.

Espero un módulo ES6 real, pero por ahora podemos vivir como tal, ya que probablemente cambiaremos a versiones precompiladas y empaquetadas sin systemjs para su lanzamiento.

@ jon-a-nygaard No puedo renderizar mi highchart en mi aplicación recat. Todo lo que obtengo es una pantalla en blanco. Esto es lo que estoy haciendo para mi 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;

y estoy usando este highchart de la siguiente manera en mi aplicación:

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

Se agradece cualquier ayuda. Gracias por adelantado.

Hasta ahora lo hice funcionar.

import Highcharts from "highcharts";

systemjs
mapa:
'highcharts': "npm:highcharts"
paquete:
'highcharts': { main: "highstock", defaultExtension: "js"}

único problema:
El compilador arroja errores porque @ types / highharts tiene el siguiente problema:
Property 'StockChart' does not exist on type 'Static'.

pero la aplicación funciona al menos

En caso de que alguien lo necesite con Rollup

Tengo la siguiente configuración que está funcionando.

En un archivo vendor.ts tengo

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

Lo que crea un paquete de proveedores.
Luego, en mi app.rollup.js (archivo de configuración para crear mi paquete de aplicaciones).

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

Y finalmente en mi aplicación puedo usar

import Highcharts from 'highcharts/highcharts';

@ jon-a-nygaard Desafortunadamente, su ejemplo no funciona con el compilador de mecanografiado. Recibo 'highchart' has no default export error.

@Skuriles agradece que tu enfoque funcione, pero lo hice simple y llanamente ..

importar 'highcharts';

(además de sus otras sugerencias)

Gracias

Ninguna de las soluciones anteriores funcionó para mí en la última versión mecanografiada para mí, la siguiente sí funcionó:

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

Para aquellos de ustedes que trabajan con Highcharts en TypeScript, he creado un ejemplo simple de una configuración funcional . Lo que hay que tener en cuenta de este ejemplo es que la carga de Highcharts debe realizarse de la siguiente manera:

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

La razón por la que import Highcharts from 'highcharts' no funciona, es que tal sintaxis requiere que nuestros módulos exporten un valor predeterminado, lo cual no es así. Para aquellos interesados, Typecript tiene una buena documentación sobre varias formas de importación .

Hola Jon, en mi caso está funcionando bien en google chrome y también mostrando los gráficos. Pero estos gráficos no vienen en el caso de mozilla y tampoco dan ningún error en la consola. Dame alguna solución de cómo resolver.

Cualquiera que resuelva esto, por favor ayude

Hola @ Sandipj38 ,

No parece un problema con las importaciones de ES6. ¿Podrías crear un tema en nuestro foro o enviarnos un correo electrónico ( detalles )? ¡Gracias!

Hola,
Estoy usando webpack, con react y highcharts. Estoy recibiendo un error con

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

He pasado por este problema y no he podido encontrar una solución. Probé todas las posibles permutaciones y combinaciones de import / require 'highcharts', 'highcharts / highstock,' highcharts.js 'y ahora estoy completamente sin opciones.

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;

¿Podrías ayudarme aquí?

@ satishrao84 , valdría la pena mirar https://github.com/kirjs/react-highcharts , me ha funcionado bien

Pude hacer que Highcharts y Highstock trabajaran con las importaciones de ES6 usando webpack con éxito con un tema y todo incluido en el paquete, archivo js.

Escribí sobre el problema en el repositorio highcharts-ng aquí https://github.com/pablojim/highcharts-ng/issues/624

La solución fue importar highcharts / highstock, luego tema, luego highcharts-ng en mi aplicación principal y luego agregar Highcharts en un paquete global en mi configuración de paquete web y funcionó.

* Nota: Tuve que degradar a highcharts-ng v1.0.1 porque 1.1.0 incluye Highcharts 5 y obliga a utilizar el producto Highcharts. Necesitaba Highstock y volver a la v1.0.1 no incluye la dependencia de Highcharts, por lo que podría usar Highstock v6 y mi tema en mi paquete sin cargar Highcharts doble o triple en el lado del cliente.

EDITAR: pude hacer que la exportación funcionara también con la sintaxis de importación 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);

Y en webpack.config configure Highcharts global para el tema.

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

@ satishrao84 recibí el mismo error cuando intenté usar un gráfico de alto valor, pero solo cargaba gráficos de alto nivel. verifique su paquete web bundle.js para Highstock JS y vea si se está empaquetando en él o si Highcharts en su lugar. vea mi comentario anterior sobre la carga de highstock con importación. Tengo highstock y un tema que funciona con highcharts-ng, pero aún no puedo hacer que el exportador funcione a pesar de que está en bundle.js y se está inyectando Highcharts, el ícono del menú aún no aparece en mi gráfico.

Este problema ahora se considera cerrado, debido a las actualizaciones realizadas en el compromiso 7da7361. Este compromiso mejora nuestra documentación sobre cómo cargar Highcharts en ES6, que he considerado el problema recurrente aquí. También aplicaré estas actualizaciones a www.highcharts.com/docs .

Con el tiempo, este problema se ha convertido en una combinación de muchos problemas diferentes, pero similares, que se ha vuelto un poco difícil de rastrear. Si alguien está experimentando un problema similar a este tema, cree un nuevo problema, ya que será más fácil brindarle la ayuda adecuada.

Para aquellos que esperan nuestros módulos ES6, siga el número 7186.

Si tiene alguna pregunta sobre este tema, envíenos un comentario.

Atentamente

me tomó un tiempo encontrarlo pero termino usando exponer

instalación simple highcharts
y luego
importar 'exponer? highcharts! highcharts / highcharts';

El problema con la solución de @ omer123456 es que obtendría un error

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

Una forma que funciona es
en tus js principales

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

Y luego agregue una nueva regla en webpack.config.js

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

Esto también resuelve el problema de Cannot read property 'Chart' of null

Se menciona en este hilo, pero es fácil pasarlo por alto; la última versión de highcharts tiene módulos es6 reales que funcionan como se esperaba:

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

Aunque parece que la mención de ellos todavía falta en los documentos en línea,