Highcharts: "Highcharts not defined" как импорт из ES6 (просмотр, бабель)

Я использую webpack ng es6, и единственный способ заставить его работать - это

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

Если кто-то знает, как заставить это работать, используя синтаксис импорта, ответьте

@ jon-a-nygaard

Спасибо за сообщение! Мы рассмотрим это как можно скорее. А пока вы можете взглянуть на webpack с загрузчиком babel в качестве альтернативы.

Привет, @ jon-a-nygaard. Webpack - это определенно путь вперед. Мы собираемся использовать это в следующем проекте. Однако этот проект слишком зрелый с большим количеством настраиваемых пакетов для просмотра. Дай мне знать, если поймешь это.

Хорошо. @ragefuljoe - window.Highcharts = Highcharts было тем, что было нужно. Он работает с этим синтаксисом импорта!

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

Должны ли мы закрыть это или вы хотите привязать window.Highcharts внутри вашего кода? Я думаю, это нужно добавить в основную документацию или где-то еще.

@piggyslasher Рад, что вам помог обходной путь от

Я думаю, это нужно добавить в основную документацию или где-то еще.

В самом деле, я добавлю обходной путь в качестве примечания к статье «

это круто @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, подчеркивание, ui-router и множество других JS-библиотек раскрывают свои функции для просмотра / веб-пакетов и т. д. и дублируют их в 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. Я проводил все свои эксперименты с React / Highsoft в CodePen, но скоро перейду на подходящий узел env. Webpack / Import / ES6 - хорошая штука.

React w / MDL и Highstock (тест)

Есть ли какие-нибудь новости о "простом" импорте {Highcharts} из модуля "highcharts" в приложениях typescript / angular 2 с highcharts 5? Нашел только документы о «требовать Highcharts», что всегда немного взломано ...

@ jon-a-nygaard

@Skuriles Какой тип Highcharts с ES6 и Babelify

@ jon-a-nygaard Я использую SystemJs

@Skuriles Вот пример того, как я использовал Highcharts с SystemJS . Надеюсь, это поможет, если нет, дайте мне знать.

Попробую как можно скорее и опубликую решение здесь!
Большое спасибо за ваш пример !!

Я изменил свой код из-за вашего предложения, но я все еще получаю ошибки машинописного текста от intellisens, а также компилятор gulp-typescript выдает ошибки. Это работает в скомпилированном приложении, но это не приносит удовлетворения.

import Highcharts из 'highcharts / highstock.js "все еще остается неизвестным модулем.

Я также пробовал использовать плагин typescript-babel, но он бросает компилятор для других целей.

Итак, наконец, я вернулся к загрузке файла highstock.js напрямую, без systemjs, и просто объявил Highcharts в файле TS, чтобы предотвратить ошибки компиляции.

Я жду настоящего модуля ES6, но пока мы можем жить так, как он, поскольку мы, вероятно, переключимся на предварительно скомпилированные, связанные версии без systemjs для выпуска!

@ jon-a-nygaard Я не могу отобразить свою диаграмму Highchart в моем приложении 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;

и я использую эту диаграмму следующим образом в своем приложении:

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

но приложение работает как минимум

На случай, если кому-то это понадобится с 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);

Для тех из вас, кто работает с Highcharts в TypeScript, я создал простой пример рабочей установки . На что следует обратить внимание в этом примере, так это то, что загрузка Highcharts должна выполняться следующим образом:

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

Причина, по которой import Highcharts from 'highcharts' не работает, заключается в том, что такой синтаксис требует, чтобы наши модули экспортировали значение по умолчанию, а они этого не делают. Для тех, кто заинтересован, в Typescript есть хорошая документация по различным формам импорта .

Привет, Джон, в моем случае он отлично работает в Google Chrome, а также показывает диаграммы. Но эти диаграммы не появляются в случае Mozilla и также не выдают ошибок в консоли. Дайте мне какое-нибудь решение, как решить.

Любой, кто решит эту проблему, пожалуйста, помогите

Привет @ Sandipj38!

Это не похоже на проблему с импортом ES6. Не могли бы вы создать тему на нашем форуме или написать нам письмо ( подробности )? Спасибо!

Привет,
Я использую 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 , у меня это сработало

Мне удалось заставить Highcharts и Highstock работать с импортом ES6, используя webpack, успешно с темой, также содержащейся в пакете, js файле.

Я писал о проблеме в репозитории highcharts-ng здесь https://github.com/pablojim/highcharts-ng/issues/624

Решением было импортировать highcharts / highstock, затем тему, затем highcharts-ng в мое основное приложение, а затем добавить Highcharts в глобальный пакет в моей конфигурации webpack, и это сработало.

* Примечание: мне пришлось перейти на 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. Эта фиксация улучшает нашу документацию о том, как загружать Highcharts в ES6, что я считаю проблемой повторения здесь. Я также приложу эти обновления к www.highcharts.com/docs .

Со временем эта проблема превратилась в смесь множества разных, но похожих проблем, которые стало немного трудно отслеживать. Если у кого-то возникла проблема, аналогичная этой теме, создайте новую проблему, так как тогда вам будет легче оказать вам соответствующую помощь.

Для тех, кто ожидает наших модулей ES6, просим следить за выпуском № 7186.

Если у вас возникнут какие-либо вопросы по этой теме, дайте нам комментарий.

С наилучшими пожеланиями

мне потребовалось время, чтобы найти его, но в конечном итоге я использую разоблачение

простая установка highcharts
а потом
import 'выставить? 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

Хотя кажется, что упоминание о них все еще отсутствует в онлайн-документации -