Highcharts: ES6 가져오기로 "하이차트가 정의되지 않음"(browserify, babel)

나는 webpack ng es6을 사용하고 있으며 작동시키는 유일한 방법은

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

누군가가 가져오기 구문을 사용하여 이 작업을 수행하는 방법을 알고 있다면 회신해 주십시오.

@ 존 어 니고르

신고해 주셔서 감사합니다! 가능한 한 빨리 이에 대해 조사하겠습니다. 그 동안 대안으로 babel-loader 가 있는 webpack 을 살펴볼 수 있습니다.

안녕하세요, @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 다행 @ragefuljoe에서 해결 방법을 도왔다. ES6 가져오기로 Highchart 로드를 개선하는 작업을 할 수 있도록 이 문제를 열어 둡니다.

나는 이것이 주요 문서나 어딘가에 추가되어야 한다고 생각합니다.

실제로 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가 작동하지 않는 이유를 이해할 수 없습니다.

@jon-a-nygaard @TorsteinHonsi - Angular, lodash, 밑줄, ui-router 및 기타 수많은 JS 라이브러리가 브라우저화/웹팩 등의 기능을 노출하고 하이차트에서 복제하는 방법을 살펴보는 것이 좋습니다.

@romiem 팁 감사합니다. 현재 이 문제를 해결하기 위해 작업 중이며 다음 유지 관리 릴리스에 적용할 계획입니다.

안녕하세요,
highcharts 4.2.5와 비슷한 문제가 있습니다. 나는 Use Highcharts to create chart in 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 지원. 나는 CodePen에서 모든 React/Highsoft 실험을 해왔지만 곧 적절한 노드 환경으로 이동할 것입니다. Webpack/Import/ES6은 좋은 것입니다.

반응 w/MDL 및 Highstock(테스트)

highcharts 5가 있는 typescript/angular 2 응용 프로그램의 "highcharts" 모듈에서 "단순" 가져오기 { Highcharts}에 대한 소식이 있습니까? 항상 약간 해키 인 "Highcharts 필요"에 대한 문서 만 찾았습니다 ...

@ 존 어 니고르

@Skuriles 어떤 유형의 은 ES6 및 Babelify에서 Highcharts를 사용하는 방법의 예입니다.

@jon-a-nygaard 저는 SystemJs를 사용하고 있습니다

@Skuriles 다음은 SystemJS와 함께 Highcharts를 사용하는 방법 의

가능한 빨리 시도하고 여기에 솔루션을 게시하겠습니다!
당신의 예를 들어 주셔서 대단히 감사합니다!!

귀하의 제안으로 인해 내 코드를 변경했지만 여전히 intellisens에서 typescript 오류가 발생하고 gulp-typescript 컴파일러에서 오류가 발생합니다. 컴파일된 앱에서 작동하지만 만족스럽지 않습니다.

import Highcharts from 'highcharts/highstock.js'는 여전히 알 수 없는 모듈입니다.

나는 또한 typescript-babel 플러그인으로 시도했지만 이것은 다른 것들을 위해 컴파일러를 던졌습니다.

그래서 마지막으로 systemjs 없이 highstock.js 파일을 직접 로드하고 컴파일 오류를 방지하기 위해 TS 파일에서 Highcharts를 선언하기 위해 다시 돌아갔습니다.

나는 실제 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";

시스템
지도:
'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 불행히도 귀하의 예제는 typescript 컴파일러에서 작동하지 않습니다. 'highchart' has no default export 오류가 발생합니다.

@Skuriles 는 접근 방식이 효과가

'하이차트' 가져오기;

(귀하의 다른 제안 외에도)

감사 해요

위의 솔루션 중 어느 것도 나를 위해 최신 typescript 버전에서 저에게 효과가 없었습니다.

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

TypeScript에서 Highcharts로 작업하는 분들 을 위해 작업 설정 의

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

import Highcharts from 'highcharts' 가 작동하지 않는 이유는 그러한 구문을 사용하려면 모듈이 기본값을 내보내야 하지만 그렇지 않기 때문입니다. 관심 있는 사람들을 위해 Typescript에는 다양한 형식의 가져오기에 대한 좋은

안녕하세요 Jon, 제 경우에는 Google 크롬에서 제대로 작동하고 차트도 표시됩니다. 그러나 이러한 차트는 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 를 볼 가치가 있을 것입니다. 저에게 잘 맞습니다.

나는 번들, js 파일에 포함된 테마와 함께 성공적으로 webpack을 사용하여 ES6 가져오기 작업을 하는 Highcharts와 Highstock을 얻을 수 있었습니다.

나는 https://github.com/pablojim/highcharts-ng/issues/624 에서 highcharts-ng 리포지토리의 문제에 대해 썼습니다.

해결책은 highcharts/highstock을 가져온 다음 테마를 가져온 다음 내 메인 앱에서 highcharts-ng를 가져온 다음 내 webpack 구성의 번들 전역에 Highcharts를 추가하는 것이었고 작동했습니다.

*참고: 1.1.0에는 Highcharts 5가 포함되어 있고 Highcharts 제품을 강제로 사용하기 때문에 highcharts-ng v1.0.1로 다운그레이드해야 했습니다. Highstock이 필요했고 v1.0.1로 되돌리면 Highcharts 종속성이 포함되지 않으므로 클라이언트 측에서 Highchart를 이중 또는 삼중 로드하지 않고도 내 번들에서 Highstock 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"
    })
  ]

@satishrao84 highstock 차트를 사용하려고 할 때 동일한 오류가 발생했지만 highchart만 로드했습니다. Highstock JS에 대한 webpack bundle.js를 확인하고 압축되어 있는지 또는 Highcharts가 대신 있는지 확인하십시오. import로 highstock 로드에 대한 위의 내 의견을 참조하십시오. highstock과 highcharts-ng로 작업하는 테마가 있지만 bundle.js에 있고 Highcharts가 주입되고 있지만 아직 내보내기가 작동하도록 할 수 없습니다. 메뉴 아이콘이 아직 내 차트에 표시되지 않습니다.

이 문제는 이제 커밋 7da7361에서 수행된 업데이트로 인해 닫힌 것으로 간주됩니다. 이 커밋은 ES6에서 Highcharts를 로드하는 방법에 대한 문서를 개선합니다. 이는 여기서 반복되는 문제로 간주됩니다. 이 업데이트를 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

작동하는 한 가지 방법은
당신의 메인 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

온라인 문서에서 그들에 대한 언급이 여전히 누락된 것으로 보이지만-