Highcharts: "Highcharts tidak didefinisikan" sebagai impor ES6 (browserify, babel)

Saya menggunakan webpack ng es6, dan satu-satunya cara saya membuatnya berfungsi adalah dengan

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

Jika seseorang tahu cara membuatnya bekerja dengan menggunakan sintaks impor, harap balas

@jon-a-nygaard

Terima kasih telah melaporkan! Kami akan menyelidiki ini sesegera mungkin. Sementara itu, Anda dapat melihat webpack dengan babel-loader sebagai alternatif.

Hai, @jon-a-nygaard. Webpack jelas merupakan jalan ke depan. Kami akan menggunakannya di proyek berikutnya. Namun proyek ini agak terlalu matang dengan cukup banyak bundel khusus browserify. Beri tahu saya jika Anda mengetahui hal ini.

Oke. @ragefuljoe - window.Highcharts = Highcharts adalah yang dibutuhkan. Ia bekerja dengan sintaks impor ini!

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

Haruskah kita menutup ini atau kalian ingin mengikat window.Highcharts di dalam kode Anda? Saya pikir ini harus ditambahkan ke dokumen utama atau di suatu tempat.

@piggyslasher Senang solusi dari @ragefuljoe membantu Anda. Saya akan membiarkan masalah ini terbuka, sehingga kami dapat bekerja untuk meningkatkan pemuatan Highcharts dengan impor ES6.

Saya pikir ini harus ditambahkan ke dokumen utama atau di suatu tempat.

Memang, saya akan menambahkan solusi sebagai catatan untuk artikel Instal dari npm .

itu keren @piggyslasher. beruntung mengimpor exporting.js dengan sintaks impor?

_memperbarui_
inilah semua baris terkait grafik tinggi saya, dengan peta yang dibutuhkan juga:

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

Apakah ada cara yang lebih baik untuk menangani data peta tertentu? Misalnya, saya mengunduh dan secara eksplisit memasukkan world.js di sini (opsi lain adalah mendapatkan json dari backend, yang mungkin saya lakukan)

Saya mengalami masalah yang sama persis. Yang ingin saya lakukan dalam proyek saya adalah mengimpor 'Highcharts' dan menyelesaikannya. Semua perpustakaan JS utama lainnya "berfungsi" di luar kotak dan saya tidak mengerti mengapa Highcharts tidak.

@jon-a-nygaard @TorsteinHonsi - mungkin ada baiknya melihat bagaimana Angular, lodash, garis bawah, ui-router dan segudang perpustakaan JS lainnya mengekspos fungsionalitas mereka untuk browserify/webpack dll dan menduplikasinya di grafik tinggi.

@romiem Terima kasih atas tipnya. Saat ini saya sedang mengerjakan perbaikan untuk ini, berencana untuk memasukkannya ke dalam rilis pemeliharaan berikutnya.

Hai,
Saya mengalami masalah serupa dengan highcharts 4.2.5. Saya mengikuti artikel Gunakan Highcharts untuk membuat grafik di React .
Jika saya menggunakan sintaks impor, yaitu import Highcharts from 'highcharts' , saya mendapatkan kesalahan Uncaught TypeError: _highcharts2.default[(this.props.type || "Chart")] is not a constructor .

Ketika saya menggunakan sintaks yang disarankan oleh @ragefuljoe , itu berhasil! namun, itu membuat saya berpikir, bagaimana kalau menggunakan 'highcharts/highstock daripada 'highcharts' ? baik, ini berfungsi dengan sintaks impor. Apa bedanya, atau dianggap berfungsi seperti itu dan saya salah menggunakan impor?

Berikut adalah kode lengkap (berfungsi):

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;

Terima kasih @jon-a-nygaard telah memberi tahu saya tentang utas ini.

👍 untuk meningkatkan dukungan Webpack. Saya telah melakukan semua eksperimen React/Highsoft saya di CodePen, tetapi akan segera pindah ke node env yang tepat. Webpack/Impor/ES6 adalah hal yang bagus.

Bereaksi dengan MDL & Highstock (tes)

Apakah ada berita tentang impor "sederhana" { Highcharts} dari modul "highcharts" dalam aplikasi TypeScript/angular 2 dengan highcharts 5? Hanya menemukan dokumen tentang "memerlukan Highcharts" yang selalu sedikit meretas ...

@jon-a-nygaard

@Skuriles Apa jenis Highcharts dengan ES6 dan Babelify

@jon-a-nygaard Saya menggunakan SystemJs

@Skuriles Berikut adalah contoh bagaimana saya menggunakan Highcharts dengan SystemJS . Semoga membantu, jika tidak tolong beri tahu saya.

Akan mencobanya sesegera mungkin dan memposting solusi di sini!
Terima kasih banyak untuk contoh Anda!!

Saya mengubah kode saya karena proposal Anda, tetapi saya masih mendapatkan kesalahan TypeScript dari intellisens dan juga kompiler gulp-typescript melempar kesalahan. Ini berfungsi di aplikasi yang dikompilasi tetapi ini tidak memuaskan.

import Highcharts dari 'highcharts/highstock.js" masih merupakan modul yang tidak diketahui.

Saya juga mencoba dengan plugin TypeScript-babel tetapi ini melempar kompiler untuk hal-hal lain.

Jadi akhirnya saya kembali untuk memuat file highstock.js secara langsung tanpa systemjs dan hanya mendeklarasikan Highcharts di file TS untuk mencegah kesalahan kompilasi.

Saya menunggu modul ES6 yang sebenarnya tetapi untuk saat ini kami dapat hidup karena kami mungkin akan beralih ke versi yang dikompilasi dan dibundel tanpa systemjs untuk rilis!

@jon-a-nygaard Saya tidak dapat membuat grafik tinggi saya di aplikasi recat saya. Yang saya dapatkan hanyalah layar kosong. Inilah yang saya lakukan untuk grafik tinggi saya:

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;

dan saya menggunakan grafik tinggi ini dengan cara berikut di aplikasi saya:

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

Setiap bantuan dihargai. Terima kasih sebelumnya.

Sejauh ini saya berhasil.

import Highcharts from "highcharts";

systemjs
peta:
'highcharts': "npm:highcharts"
kemasan:
'highcharts': { main: "highstock", defaultExtension: "js"}

hanya masalah:
compiler melempar kesalahan karena @types/highharts memiliki masalah berikut:
Property 'StockChart' does not exist on type 'Static'.

tetapi aplikasi ini setidaknya berfungsi

Jika seseorang mungkin membutuhkannya dengan Rollup

Saya memiliki pengaturan berikut yang berfungsi.

Dalam file vendor.ts yang saya miliki

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

Yang membuat bundel vendor.
Kemudian di app.rollup.js saya (file konfigurasi untuk membuat bundel aplikasi saya).

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

Dan akhirnya di aplikasi saya bisa saya gunakan

import Highcharts from 'highcharts/highcharts';

@jon-a-nygaard Sayangnya contoh Anda tidak berfungsi dengan kompiler TypeScript. Saya mendapatkan kesalahan 'highchart' has no default export .

@Skuriles terima kasih pendekatan Anda berhasil tetapi saya melakukan yang sederhana dan sederhana ..

impor 'highcharts';

(selain saran Anda yang lain)

Terima kasih

Tidak ada solusi di atas yang berfungsi untuk saya dalam versi TypeScript terbaru untuk saya yang di bawah ini berhasil:

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

Bagi Anda yang bekerja dengan Highcharts di TypeScript, saya telah membuat contoh sederhana dari setup kerja . Yang perlu diperhatikan dari contoh ini adalah memuat Highcharts harus dilakukan sebagai berikut:

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

Alasan mengapa import Highcharts from 'highcharts' tidak berfungsi, adalah karena sintaks semacam itu mengharuskan modul kita untuk mengekspor default, padahal tidak. Bagi mereka yang tertarik, TypeScript memiliki dokumentasi yang bagus

Hai Jon, dalam kasus saya ini berfungsi dengan baik di google chrome dan juga menampilkan grafik. Tetapi grafik ini tidak datang dalam kasus mozilla dan juga tidak memberikan kesalahan apa pun di konsol. Beri saya beberapa solusi bagaimana menyelesaikannya.

Siapapun yang memecahkan ini tolong bantu

Hai @Sandipj38 ,

Kedengarannya tidak seperti masalah dengan impor ES6. Bisakah Anda membuat topik di forum kami atau mengirimkan email ( detail ) kepada kami? Terima kasih!

Halo,
Saya menggunakan webpack, dengan reaksi dan grafik tinggi. Saya mendapatkan kesalahan dengan

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

Saya telah mengatasi masalah ini dan saya tidak dapat menemukan solusi. Saya telah mencoba setiap kemungkinan permutasi dan kombinasi dari impor/memerlukan 'highcharts', 'highcharts/highstock,'highcharts.js' dan sekarang saya benar-benar kehabisan pilihan.

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;

Bisakah Anda membantu saya di sini?

@ satishrao84 mungkin ada baiknya melihat https://github.com/kirjs/react-highcharts , ini bekerja dengan baik untuk saya

Saya bisa membuat Highcharts dan Highstock bekerja dengan impor ES6 menggunakan webpack dengan sukses dengan tema juga semua yang terkandung dalam bundel, file js.

Saya menulis tentang masalah pada repo highcharts-ng di sini https://github.com/pablojim/highcharts-ng/issues/624

Solusinya adalah mengimpor highcharts/highstock, lalu tema, lalu highcharts-ng di aplikasi utama saya dan kemudian menambahkan Highcharts dalam bundel global di konfigurasi webpack saya dan itu berhasil.

*Catatan: Saya harus menurunkan versi ke highcharts-ng v1.0.1 karena 1.1.0 menyertakan Highcharts 5 dan memaksa produk Highcharts untuk digunakan. Saya membutuhkan Highstock dan kembali ke v1.0.1 tidak menyertakan ketergantungan Highcharts sehingga saya dapat menggunakan Highstock v6 dan tema saya di bundel saya tanpa memuat dua atau tiga kali Highcharts di sisi klien.

EDIT: saya juga bisa mengekspor dengan sintaks impor 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);

Dan di webpack.config atur Highcharts global untuk tema tersebut.

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

@ satishrao84 saya mendapatkan kesalahan yang sama ketika saya mencoba menggunakan grafik highstock tetapi hanya memuat grafik tinggi. periksa di webpack bundle.js Anda untuk Highstock JS dan lihat apakah itu sedang dikemas ke dalamnya atau apakah Highcharts sebagai gantinya. lihat komentar saya di atas tentang memuat highstock dengan impor. saya memiliki highstock dan tema yang bekerja dengan highcharts-ng tetapi belum bisa membuat eksportir bekerja meskipun itu ada di bundle.js dan sedang disuntikkan Highcharts, ikon menu belum muncul di bagan saya.

Masalah ini sekarang dianggap selesai, karena pembaruan dilakukan di komit 7da7361. Komit ini meningkatkan dokumentasi kami tentang cara memuat Highcharts di ES6, yang saya anggap sebagai masalah berulang di sini. Saya juga akan menerapkan pembaruan ini ke www.highcharts.com/docs juga.

Seiring waktu, masalah ini telah berkembang menjadi campuran dari banyak masalah yang berbeda, tetapi serupa yang menjadi sedikit sulit untuk dilacak. Jika ada yang mengalami masalah serupa dengan topik ini, harap buat masalah baru, karena akan lebih mudah untuk memberi Anda bantuan yang sesuai.

Bagi mereka yang menunggu modul ES6 kami, ikuti edisi #7186.

Jika ada pertanyaan tentang topik ini, silakan beri kami komentar.

Salam

butuh beberapa saat untuk menemukannya tetapi saya akhirnya menggunakan eksposur

instal sederhana grafik tinggi
lalu
impor 'mengekspos?highcharts!highcharts/highcharts';

Masalah dengan solusi @ omer123456 adalah Anda akan mendapatkan kesalahan

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

Salah satu cara yang berhasil adalah
di js utama Anda

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

Dan kemudian tambahkan aturan baru di webpack.config.js

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

Ini juga menyelesaikan masalah Cannot read property 'Chart' of null

Disebutkan di utas ini, tetapi mudah dilewatkan; versi terbaru dari highcharts memiliki modul es6 nyata yang berfungsi seperti yang diharapkan:

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

Meskipun tampaknya penyebutan mereka masih hilang dari dokumen online-