Highcharts: ES6 आयात के रूप में "हाईचार्ट्स परिभाषित नहीं" (ब्राउज़राइज़, बेबेल)

मैं वेबपैक एनजी ईएस 6 का उपयोग कर रहा हूं, और जिस तरह से मैंने इसे काम करने के लिए प्राप्त किया है वह है

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

अगर कोई जानता है कि आयात सिंटैक्स का उपयोग करके इसे कैसे काम करना है, तो कृपया उत्तर दें

@ जॉन-ए-न्यागार्ड

रिपोर्टिंग के लिए धन्यवाद! हम जल्द से जल्द इस पर गौर करेंगे। इस बीच, आप एक विकल्प के रूप में बेबेल-लोडर के साथ वेबपैक पर एक नज़र डाल सकते हैं।

हाय, @ जॉन-ए-नायगार्ड। वेबपैक निश्चित रूप से आगे का रास्ता है। हम इसे अगले प्रोजेक्ट में उपयोग करने जा रहे हैं। हालांकि यह प्रोजेक्ट बहुत अधिक ब्राउजिंग कस्टम बंडलों के साथ थोड़ा बहुत परिपक्व है। अगर आपको यह पता चल जाए तो मुझे बताएं।

ठीक। @ragefuljoe - window.Highcharts = Highcharts की जरूरत थी। यह इस आयात सिंटैक्स के साथ काम करता है!

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

क्या हमें इसे बंद कर देना चाहिए या आप लोग विंडो को बांधना चाहते हैं। आपके कोड के अंदर हाईचार्ट्स? मुझे लगता है कि इसे मुख्य दस्तावेज़ों या कहीं और जोड़ा जाना चाहिए।

@piggyslasher खुशी है कि @ragefuljoe के कामकाज ने आपकी मदद की। मैं इस मुद्दे को खुला छोड़ दूंगा, इसलिए हम ES6 आयात के साथ लोडिंग हाईचार्ट्स को बेहतर बनाने पर काम कर सकते हैं।

मुझे लगता है कि इसे मुख्य दस्तावेज़ों या कहीं और जोड़ा जाना चाहिए।

वास्तव में, मैं वर्कअराउंड को एक नोट के रूप में 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 डाउनलोड कर रहा हूं और स्पष्ट रूप से शामिल हूं (अन्य विकल्प बैकएंड से जेसन प्राप्त करना है, जो मैं कर सकता हूं)

मुझे बिल्कुल वही समस्या हो रही है। मैं अपनी परियोजना में केवल 'हाईचार्ट्स' आयात करना चाहता हूं और इसके साथ किया जाना है। अन्य सभी प्रमुख जेएस पुस्तकालय बॉक्स से बाहर "बस काम करते हैं" और मुझे समझ में नहीं आता कि हाईचार्ट्स क्यों नहीं करता है।

@ jon-a-nygaard @TorsteinHonsi - यह देखने लायक हो सकता है कि कैसे कोणीय, लॉश, अंडरस्कोर, यूआई-राउटर और अन्य जेएस पुस्तकालयों के असंख्य ब्राउज़र/वेबपैक आदि के लिए उनकी कार्यक्षमता को उजागर करते हैं और इसे हाईचार्ट्स में डुप्लिकेट करते हैं।

@romiem टिप के लिए धन्यवाद। मैं वर्तमान में इसके लिए एक सुधार पर काम कर रहा हूं, इसे हमारी अगली रखरखाव रिलीज में लाने की योजना बना रहा हूं।

नमस्ते,
मुझे हाईचार्ट्स 4.2.5 के साथ एक समान समस्या है। मैं लेख का अनुसरण कर रहा हूं
अगर मैं आयात सिंटैक्स का उपयोग करता हूं, जो कि 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;

मुझे इस सूत्र के बारे में बताने के लिए @ जॉन-ए-नायगार्ड धन्यवाद।

उन्नत वेबपैक समर्थन के लिए। मैं कोडपेन में अपने सभी रिएक्ट/हाईसॉफ्ट प्रयोग कर रहा हूं, लेकिन जल्द ही एक उचित नोड एनवी पर जा रहा हूं। वेबपैक/आयात/ईएस 6 अच्छी चीजें हैं।

प्रतिक्रिया w / MDL और हाईस्टॉक (परीक्षण)

क्या हाईचार्ट्स 5 के साथ टाइपस्क्रिप्ट/कोणीय 2 अनुप्रयोगों में "हाईचार्ट्स" मॉड्यूल से "सरल" आयात {हाईचार्ट्स} के बारे में कोई खबर है? केवल "हाईचार्ट्स की आवश्यकता है" के बारे में दस्तावेज़ मिले जो हमेशा थोड़ा सा हैकी होता है ...

@ जॉन-ए-न्यागार्ड

@Skuriles आप किस प्रकार के बंडलर (जैसे Webpack, Browserify) का उपयोग कर रहे हैं? यहां एक उदाहरण दिया गया है कि आप ES6 और Babelify के साथ Highcharts का उपयोग कैसे कर सकते हैं

@ जॉन-ए-नायगार्ड मैं SystemJs का उपयोग कर रहा हूँ

@Skuriles यहां एक उदाहरण दिया गया है कि मैंने SystemJS के साथ Highcharts का उपयोग कैसे किया । उम्मीद है कि यह मदद करता है, अगर नहीं तो कृपया मुझे बताएं।

जितनी जल्दी हो सके इसे आजमाएं और यहां समाधान पोस्ट करें!
आपके उदाहरण के लिए बहुत बहुत धन्यवाद !!

मैंने आपके प्रस्ताव के कारण अपना कोड बदल दिया है, लेकिन मुझे अभी भी इंटेलिजेंस से टाइपस्क्रिप्ट त्रुटियां मिलती हैं और गल्प-टाइपस्क्रिप्ट कंपाइलर भी त्रुटियां फेंकता है। यह संकलित ऐप में काम करता है लेकिन यह संतोषजनक नहीं है।

Highcharts/highstock.js से आयात Highcharts अभी भी एक अज्ञात मॉड्यूल है।

मैंने टाइपस्क्रिप्ट-बेबेल प्लगइन के साथ भी कोशिश की लेकिन यह अन्य चीजों के लिए कंपाइलर फेंकता है।

तो अंत में मैं बिना systemjs के सीधे highstock.js फ़ाइल को लोड करने के लिए वापस गया और संकलन त्रुटियों को रोकने के लिए TS फ़ाइल में केवल Highcharts घोषित किया।

मैं एक वास्तविक ES6 मॉड्यूल की प्रतीक्षा करता हूं लेकिन अभी के लिए हम इसे वैसे ही जी सकते हैं क्योंकि हम रिलीज के लिए सिस्टमज के बिना प्रीकंपील्ड, बंडल संस्करणों पर स्विच करेंगे!

@ 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";

सिस्टमजेएस
नक्शा:
'highcharts': "npm:highcharts"
पैकेज:
'highcharts': { main: "highstock", defaultExtension: "js"}

केवल समस्या:
कंपाइलर त्रुटियाँ फेंकता है क्योंकि @types/highharts में निम्न समस्या है:
Property 'StockChart' does not exist on type 'Static'.

लेकिन ऐप कम से कम काम करता है

अगर किसी को रोलअप के साथ इसकी आवश्यकता हो सकती है

मेरे पास निम्न सेटअप है जो काम कर रहा है।

एक वेंडर.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';

@ जॉन-ए-नायगार्ड दुर्भाग्य से आपका उदाहरण टाइपस्क्रिप्ट कंपाइलर के साथ काम नहीं करता है। मुझे 'highchart' has no default export त्रुटि मिलती है।

@Skuriles धन्यवाद आपका दृष्टिकोण काम करता है लेकिन मैंने एक सादा और सरल किया ..

आयात 'हाईचार्ट्स';

(आपके अन्य सुझावों के अतिरिक्त)

धन्यवाद

ऊपर दिए गए किसी भी समाधान ने मेरे लिए नवीनतम टाइपस्क्रिप्ट संस्करण में मेरे लिए काम नहीं किया, नीचे वाले ने काम किया:

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

आप में से उन लोगों के लिए जो टाइपस्क्रिप्ट में हाईचार्ट्स के साथ काम कर रहे हैं, मैंने एक वर्किंग सेटअप का एक सरल उदाहरण बनाया है। इस उदाहरण से ध्यान देने योग्य बात यह है कि हाईचार्ट्स को लोड करना निम्नानुसार किया जाना चाहिए:

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

import Highcharts from 'highcharts' काम नहीं करने का कारण यह है कि इस तरह के सिंटैक्स के लिए हमारे मॉड्यूल को एक डिफ़ॉल्ट निर्यात करने की आवश्यकता होती है, जो वे नहीं करते हैं। रुचि रखने वालों के लिए, टाइपस्क्रिप्ट में आयात के विभिन्न रूपों पर एक अच्छा

हाय जॉन, मेरे मामले में यह Google क्रोम में ठीक काम कर रहा है और चार्ट भी दिखा रहा है। लेकिन ये चार्ट मोज़िला के मामले में नहीं आ रहे हैं और कंसोल में भी कोई त्रुटि नहीं दे रहे हैं। मुझे कोई उपाय बताएं कि कैसे हल किया जाए।

कोई भी जो इसे हल करता है कृपया मदद करें

हाय @ संदीपज 38 ,

यह ES6 आयात के साथ समस्या की तरह नहीं लगता है। क्या आप हमारे मंच पर कोई विषय बना सकते हैं या हमें एक ईमेल ( विवरण ) भेज सकते हैं? धन्यवाद!

नमस्ते,
मैं वेबपैक का उपयोग कर रहा हूं, प्रतिक्रिया और हाईचार्ट्स के साथ। मुझे त्रुटि मिल रही है

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

मैं इस मुद्दे के बावजूद चला गया हूं और मुझे कोई समाधान नहीं मिला है। मैंने आयात/आवश्यकता 'हाईचार्ट्स', 'हाईचार्ट्स/हाईस्टॉक', 'हाईचार्ट्स.जेएस' के हर संभव क्रमपरिवर्तन और संयोजन की कोशिश की है और अब मैं पूरी तरह से विकल्पों से बाहर हूं।

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;

क्या आप कृपया यहाँ मेरी मदद कर सकते हैं?

@ सतीशराव 84 यह देखने लायक हो सकता है https://github.com/kirjs/react-highcharts , यह मेरे लिए अच्छा काम करता है

मैं हाईचार्ट्स और हाईस्टॉक को वेबपैक का उपयोग करके ईएस 6 आयात के साथ काम करने में सक्षम था, साथ ही सभी बंडल, जेएस फ़ाइल में निहित थीम के साथ।

मैंने यहां हाईचार्ट्स-एनजी रेपो पर समस्या के बारे में लिखा है https://github.com/pablojim/highcharts-ng/issues/624

समाधान मेरे मुख्य ऐप में हाईचार्ट्स/हाईस्टॉक, फिर थीम, फिर हाईचार्ट्स-एनजी आयात करना था और फिर मेरे वेबपैक कॉन्फ़िगरेशन में बंडल ग्लोबल में हाईचार्ट्स जोड़ना था और यह काम करता था।

*नोट: मुझे हाईचार्ट्स-एनजी v1.0.1 में डाउनग्रेड करना पड़ा क्योंकि 1.1.0 में हाईचार्ट्स 5 शामिल है और हाईचार्ट्स उत्पाद का उपयोग करने के लिए मजबूर करता है। मुझे हाईस्टॉक की आवश्यकता थी और v1.0.1 पर वापस लौटने में हाईचार्ट्स निर्भरता शामिल नहीं है, इसलिए मैं क्लाइंट साइड पर डबल या ट्रिपल लोडिंग हाईचार्ट्स के बिना अपने बंडल में हाईस्टॉक v6 और मेरी थीम का उपयोग कर सकता हूं।

संपादित करें: मैं आयात 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"
    })
  ]

@ सतीशराव 84 मुझे वही त्रुटि मिल रही थी जब मैंने हाईस्टॉक चार्ट का उपयोग करने की कोशिश की लेकिन केवल हाईचार्ट लोड कर रहा था। Highstock JS के लिए अपने webpack बंडल में जाँच करें और देखें कि क्या इसे इसमें पैक किया जा रहा है या इसके बजाय Highcharts है। आयात के साथ हाईस्टॉक लोड करने पर ऊपर मेरी टिप्पणी देखें। मेरे पास हाईस्टॉक और एक थीम है जो हाईचार्ट्स-एनजी के साथ काम कर रही है, लेकिन निर्यातक को अभी तक काम करने के लिए नहीं मिल सकता है, भले ही वह बंडल में है।

7da7361 प्रतिबद्ध में किए गए अद्यतनों के कारण, इस मुद्दे को अब बंद माना जाता है। यह प्रतिबद्धता ES6 में हाईचार्ट्स को लोड करने के तरीके पर हमारे दस्तावेज़ीकरण में सुधार करती है, जिसे मैंने यहां पुनरावर्ती समस्या माना है। मैं इन अद्यतनों को www.highcharts.com/docs पर भी लागू करूँगा।

समय के साथ यह मुद्दा कई अलग-अलग, लेकिन समान मुद्दों के मिश्रण के रूप में विकसित हुआ है, जिसे ट्रैक करना थोड़ा मुश्किल हो गया है। अगर किसी को भी इस विषय में इसी तरह की समस्या का सामना करना पड़ रहा है, तो कृपया एक नया मुद्दा बनाएं, क्योंकि तब आपको उचित सहायता देना आसान हो जाएगा।

उन लोगों के लिए जो हमारे ES6 मॉड्यूल की प्रतीक्षा कर रहे हैं, कृपया #7186 अंक का पालन करें।

यदि इस विषय के संबंध में कोई प्रश्न हैं, तो कृपया हमें एक टिप्पणी दें।

सादर

मुझे इसे खोजने में थोड़ा समय लगा, लेकिन मैं एक्सपोज़ का उपयोग करके समाप्त हुआ

सरल हाईचार्ट स्थापित करें
और फिर
आयात 'एक्सपोज़? हाईचार्ट्स! हाईचार्ट्स/हाईचार्ट्स';

@ 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

काम करने का एक तरीका है
आपके मुख्य जेएस . में

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 . के मुद्दे को भी हल करता है

इस धागे पर इसका उल्लेख किया गया है, लेकिन याद रखना आसान है; हाईचार्ट्स के नवीनतम संस्करण में वास्तविक ES6 मॉड्यूल हैं जो अपेक्षा के अनुरूप काम करते हैं:

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

हालाँकि ऐसा प्रतीत होता है कि उनका उल्लेख अभी भी ऑनलाइन डॉक्स से गायब है-