Highcharts: "لم يتم تعريف Highcharts" مثل استيراد ES6 (browserify ، بابل)

أنا أستخدم 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';

هل يجب أن نغلق هذا أو هل تريدون ربط النافذة. أعتقد أنه يجب إضافة هذا إلى المستندات الرئيسية أو في مكان ما.

piggyslasher سعيد ، لقد ragefuljoe . سأترك هذه المشكلة مفتوحة ، حتى نتمكن من العمل على تحسين تحميل Highcharts مع واردات 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 بشكل صريح هنا (الخيار الآخر هو الحصول على json من الواجهة الخلفية ، وهو ما قد أفعله)

أواجه نفس المشكلة بالضبط. كل ما أريد القيام به في مشروعي هو استيراد "Highcharts" والانتهاء من ذلك. جميع مكتبات JS الرئيسية الأخرى "تعمل فقط" خارج الصندوق ولا أستطيع أن أفهم لماذا لا تعمل Highcharts.

@ جون واحد في نيجاردTorsteinHonsi - قد يكون من المفيد النظر في كيفية الزاوي، lodash، تسطير، واجهة المستخدم الموجه وعدد لا يحصى من المكتبات JS أخرى تعرض وظائفها لbrowserify / webpack وغيرها، وتكرار ذلك في 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 ، لكنني سأنتقل إلى بيئة عقدة مناسبة قريبًا. حزمة الويب / الاستيراد / ES6 هي أشياء جيدة.

تفاعل مع MDL و Highstock (اختبار)

هل هناك أي أخبار حول الاستيراد "البسيط" {Highcharts} من وحدة "Highcharts" في التطبيقات المطبوعة / الزاويّة 2 ذات المخططات العالية 5؟ تم العثور فقط على المستندات المتعلقة بـ "تتطلب Highcharts" والتي دائمًا ما تكون مخترقة قليلاً ...

@ jon-a-nygaard

Skuriles ما نوع المجمّع (مثل Webpack و Browserify) الذي تستخدمه؟ فيما يلي مثال لكيفية استخدام Highcharts مع ES6 و Babelify

@ jon-a-nygaard أنا أستخدم SystemJs

Skuriles إليك مثال على كيفية استخدامي Highcharts مع SystemJS . آمل أن يساعد ، إذا لم يكن كذلك ، يرجى إعلامي.

سنحاول في أقرب وقت ممكن ونشر الحل هنا!
شكرا جزيلا على مثالك !!

لقد غيرت الكود الخاص بي بناءً على اقتراحك ، لكنني ما زلت أحصل على أخطاء مطبوعة من intellisens وأيضًا يلقي برنامج التحويل البرمجي gulp-typecript أخطاء. إنه يعمل في التطبيق المترجم ولكن هذا غير مرضٍ.

لا يزال استيراد Highcharts من "highcharts / highstock.js" وحدة نمطية غير معروفة.

لقد جربت أيضًا مع المكون الإضافي من نوع بابل ولكن هذا يلقي مترجمًا لأشياء أخرى.

لذا عدت أخيرًا لتحميل ملف highstock.js مباشرة بدون systemjs وأعلن فقط Highcharts في ملف TS لمنع أخطاء الترجمة.

أنتظر وحدة ES6 حقيقية ولكن في الوقت الحالي يمكننا العيش كما هي حيث من المحتمل أن ننتقل إلى الإصدارات المجمعة مسبقًا والمجمعة بدون systemjs للإصدار!

@ jon-a-nygaard لا يمكنني عرض المخطط العالي الخاص بي في تطبيق recat الخاص بي. كل ما أحصل عليه هو شاشة فارغة. هذا ما أفعله في المخطط العالي الخاص بي:

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 شكرا لك

استيراد "مخططات عالية" ؛

(بالإضافة إلى اقتراحاتك الأخرى)

شكرا

لم يعمل أي من الحلول المذكورة أعلاه بالنسبة لي في أحدث نسخة مطبوعة بالنسبة لي ، فالحل أدناه نجح:

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' ، هو أن بناء الجملة هذا يتطلب من الوحدات النمطية لدينا تصدير افتراضي ، وهو ما لا يفعلونه. للراغبين في ذلك ، يحتوي برنامج تنكري سكريبت على توثيق جيد

مرحبًا جون ، في حالتي ، يعمل بشكل جيد في google chrome ويعرض أيضًا المخططات. لكن هذه الرسوم البيانية لا تأتي في حالة mozilla وأيضًا لا تعطي أي خطأ في وحدة التحكم. أعطني بعض الحل كيف أحل.

أي شخص يحل هذا الرجاء المساعدة

مرحبًا @ Sandipj38 ،

لا يبدو أنها مشكلة مع واردات ES6. هل يمكنك إنشاء موضوع على منتدانا أو إرسال بريد إلكتروني إلينا ( التفاصيل )؟ شكرا!

أهلا،
أنا أستخدم حزمة الويب ، مع تفاعل ومخططات عالية. أنا أتلقى خطأ مع

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

لقد مررت بهذه المشكلة ولم أتمكن من إيجاد حل. لقد جربت كل تبديل ممكن ومجموعة من الاستيراد / تتطلب "مخططات عالية" و "مخططات عالية / عالية الأوراق المالية" و "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 باستخدام حزمة الويب بنجاح مع سمة بالإضافة إلى كل ما هو موجود في الحزمة ، ملف js.

كتبت عن المشكلة في Highcharts-ng repo هنا https://github.com/pablojim/highcharts-ng/issues/624

كان الحل هو استيراد highcharts / highstock ، ثم theme ، ثم highcharts-ng في تطبيقي الرئيسي ، ثم إضافة Highcharts في حزمة عالمية في تهيئة webpack الخاصة بي وعملها.

* ملاحظة: اضطررت إلى الرجوع إلى إصدار v1.0.1 highcharts-ng لأن 1.1.0 يتضمن Highcharts 5 ويفرض استخدام منتج Highcharts. كنت بحاجة إلى Highstock والعودة إلى الإصدار 1.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 Global للموضوع.

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

@ satishrao84 كنت أتلقى نفس الخطأ عندما حاولت استخدام مخطط Highstock ولكني كنت أحمل مخططات عالية فقط. تحقق في حزمة webpackle.js الخاصة بك لـ Highstock JS ومعرفة ما إذا كان يتم تعبئتها فيه أو ما إذا كانت Highcharts بدلاً من ذلك. انظر تعليقي أعلاه على تحميل highstock مع الاستيراد. لدي مخزون كبير وموضوع يعمل مع highcharts-ng ولكن لا يمكنني جعل المصدر يعمل حتى الآن على الرغم من أنه موجود في bundle.js ويتم إدخال Highcharts على أيقونة القائمة التي لم تظهر بعد على الرسم البياني الخاص بي.

تعتبر هذه المشكلة الآن مغلقة ، بسبب التحديثات التي تم إجراؤها في الالتزام 7da7361. يعمل هذا الالتزام على تحسين وثائقنا حول كيفية تحميل Highcharts في ES6 ، والتي اعتبرتها مشكلة متكررة هنا. سأقوم أيضًا بتطبيق هذه التحديثات على www.highcharts.com/docs .

بمرور الوقت ، تطورت هذه المشكلة إلى مزيج من العديد من المشكلات المختلفة ، ولكن المتشابهة التي أصبح من الصعب قليلاً تتبعها. إذا كان أي شخص يواجه مشكلة مشابهة لهذا الموضوع ، يرجى إنشاء مشكلة جديدة ، حيث سيكون من الأسهل تقديم المساعدة المناسبة لك.

بالنسبة لأولئك الذين ينتظرون وحدات ES6 الخاصة بنا ، يرجى اتباع المشكلة رقم 7186.

في حالة وجود أي أسئلة بخصوص هذا الموضوع ، يرجى إبداء تعليق.

تحياتي الحارة

استغرق الأمر مني بعض الوقت للعثور عليه ولكن انتهى بي الأمر باستخدام فضح

تثبيت بسيط هاي شارتس
وثم
استيراد "expose؟ 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

طريقة واحدة تعمل هي
في شبيبتك الرئيسية

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

على الرغم من أنه يبدو أن ذكرها لا يزال مفقودًا في المستندات عبر الإنترنت-