Highcharts: RequireJS를 통한 종속 Highcharts 모듈 또는 highcharts-more 로드는 버전 6.1.2에서 실패합니다.

안녕하세요 @jee7

이 문제를 신고해 주셔서 감사합니다. 당신이 옳습니다. 뭔가 잘못되었습니다. 우리는 이것을 확인할 것입니다.

내부 참고 사항:
@oysteinmoseng CDN의 동일한 데모:

• v6.1.1 - http://jsfiddle.net/BlackLabel/6zypqedn/4/
• v6.1.2 - http://jsfiddle.net/BlackLabel/6zypqedn/5/

책임 있는 커밋: https://github.com/highcharts/highcharts-assembler/commit/0d223359731079077a5a6ad693b53655e8352fc2

6.1.2 Highcharts는 AMD 로딩을 지원하므로 shimming이 더 이상 필요하지 않습니다. 그러나 AMD 로딩을 사용하면 추가 초기화 단계를 수행해야 합니다. 이것이 데모가 실패하는 원인입니다.

RequireJS로 Highchart를 로드하는 방법에 대한 자세한 내용은 여기 를 참조

지금은 이 문제를 닫을 것이지만 추가 문제가 발생하면 언제든지 다시 여십시오.

답변 주셔서 감사합니다. 답변이 늦어 죄송합니다, 제가 처리한 것 같습니다.

기본적으로 내 사이트의 특정 페이지에 로드되는 자체 RequireJS 모듈이 많이 있습니다. 그 중 일부는 Highcharts를 사용하고 일부는 사용하지 않습니다. 따라서 새로운 Highcharts 초기화를 기본 requirejs() 호출에 넣고 싶지 않습니다(귀하의 예에서 볼 수 있듯이). 그렇게 하면 사용하지 않더라도 항상 모든 페이지에 로드됩니다. 이전에는 shim을 사용하여 필요할 때 하나의 highcharts 종속성을 포함할 수 있었고 올바르게 구성되었는지 확인했습니다.

그래서 내 첫 번째 접근 방식은 새로운 종속성 주입을 내 모듈 중 하나에 넣고 작동하는지 확인하는 것이었습니다. 그리고 그것은 했다.

이렇게 하면 각각의 모듈에 대해 로드되는 실제 Highcharts 모듈을 더 잘 제어할 수 있습니다. 그러나 Highcharts를 사용하는 각 모듈 위에 그렇게 긴 종속성 주입 코드를 넣고 복제하고 싶지 않습니다... 그래서 결국 Highcharts 구성만 수행하는 소수의 다른 모듈을 만들었습니다.

그리고 다시 한 번 Highcharts를 내 모듈에 한 번만 삽입할 수 있습니다.

작동하는 것 같습니다.

@mbrodala가 제안한 대로 패턴에 대한 토론을 위해 이것을 다시 엽니다.

이것을 다시 시작하려면 #8916의 내 의견:

따라서 이것을 이해하는 것은 특히 사용자가 highcharts라는 이름의 모듈이 아닌 다른 것을 로드하고 이를 Highcharts로 다양한 Highcharts 모듈에 전달할 수 있도록 하는 것입니다. 이것이 얼마나 자주 필요한지는 모르겠지만 현재 상태가 혼란스럽고 불완전하다고 말할 수 있습니다. 우리는 RequireJS를 사용하여 결국 종속성 문제를 피하고 있으므로 사용자에게 이것을 강제로 적용하는 것이 올바른 방법인지 확신할 수 없습니다.

Highcharts를 통합한 다른 AMD 사용자에게 워크플로에 대해 묻고 싶습니다. 특히 현재의 유연성이 정말로 필요하거나 모든 Highcharts 모듈이 Highcharts 개체를 주입하기 위해 highcharts 라는 모듈이 필요하다면 모든 사람이 괜찮을 것입니다.

내가 이해하는 한 모든 페이지에 모든 추가 Highcharts 모듈이 필요하지 않을 수도 있다는 아이디어입니다. 예를 들어, 선버스트 플롯을 보여주는 페이지와 스트림그래프 플롯을 보여주는 다른 페이지를 가질 수 있습니다. 사용자가 두 페이지 모두에 선버스트 및 스트림그래프 플롯 모두에 대한 코드를 로드할 필요는 없습니다.

그러나 이것은 어떤 페이지가 어떤 추가 Highcharts 모듈을 사용하는지 구체적으로 구성해야 함을 의미합니다. shim 구성으로 나는 게으르며 주요 Highchart 모듈에 대한 종속성으로 사용한 다른 모든 모듈을 추가했습니다.

이제 AMD와 함께 나도 약간 게으르다. 내 웹사이트는 실제로 여러 모듈로 구성되어 있습니다. 섹션이라고 합시다. 그들은 학생, 교사, 논문 및 논문으로 명명됩니다. 그러나 일반화를 위해 사용자, 유료 사용자 및 관리자와 같은 섹션을 생각할 수 있습니다. 또는 다른 도메인 개체를 기반으로 하는 섹션. 그래서 제가 한 일은 각 섹션에 대해 Highcharts용으로 별도의 AMD 모듈을 만드는 것이었습니다. 기본적으로 js/modules/student/highcharts , js/modules/teacher/highcharts , js/modules/theses/highcharts 등이 있습니다. 모두 특정 섹션의 모든 페이지에서 사용하는 기능에 따라 Highcharts를 다르게 구성합니다. 내 이전 게시물을 참조하십시오(어떤 이유로 스크린샷이 이전에 사라졌습니다).

구성만 가지고 비슷한 작업을 할 수 있다면 좋았을 것입니다. 내가 shim과 함께했던 것처럼. 그런 다음 종속성 주입 항목을 모듈 정의 내부가 아닌 단일 구성 파일에 모두 유지할 수 있습니다. 실제 주입은 구성에 따라 자동으로 수행될 수 있습니다. 지금은 AMD에 대해 경험이 풍부하고 익숙하지 않지만, 제가 읽은 한 AMD 모듈에 대한 shim 구성을 작성하는 것은 나쁜 생각입니다.

따라서 현재 Highcharts의 특정 조합을 로드할 수 있는 다른 방법이 없습니다. 하지만 기본 Highcharts 기능을 사용하는 페이지에는 1-2개의 JS 파일만 로드할 수 있고 10개의 다른 Highcharts 모듈의 기능을 사용하는 페이지에는 ~10개의 JS 파일만 로드할 수 있기를 원한다고 생각합니다.

그러나 한 가지 방법은 CDN에서 Highcharts를 로드할 때 포함하고 준비할 모듈을 URL 매개변수로 지정하는 것입니다. Google이 Google Fonts에서 수행하는 것과 같습니다. 이와 같은 것: https://code.highcharts.com/highcharts?modules=more,sunburst,streamgraph .

그런 다음 RequireJS에서 Highcharts의 다른 구성 이름을 다르게 지정할 수 있고 사용 시 각 구성에 대해 CDN에서 단일 파일만 로드할 수 있으며 DI를 직접 수행할 필요가 없습니다.

나는 @mbrodala 그의 말에 동의합니다.

따라서 이것을 이해하는 것은 특히 사용자가 highcharts라는 이름의 모듈이 아닌 다른 것을 로드하고 이를 Highcharts로 다양한 Highcharts 모듈에 전달할 수 있도록 하는 것입니다. 이것이 얼마나 자주 필요한지는 모르겠지만 현재 상태가 혼란스럽고 불완전하다고 말할 수 있습니다. 우리는 RequireJS를 사용하여 결국 종속성 문제를 피하고 있으므로 사용자에게 이것을 강제로 적용하는 것이 올바른 방법인지 확신할 수 없습니다.

RequireJS를 사용하여 Highcharts 라이브러리를 로드합니다. Highcharts 개체를 주입하기 위해 단순히 highcharts 를 요구하는 이전 방법이 더 낫다고 생각합니다. 현재 상태가 혼란스러울 뿐만 아니라 우리와 같은 사용자가 최신 버전의 Highchart로 업그레이드하는 것을 제한하기 때문입니다.

@oysteinmoseng 이와 관련된 업데이트가 있습니까?

@TorsteinHonsi @pawelfus

@tejaspchordiya 대부분의 사용자가 구성 경로를 선호하는 것이 매우 분명하므로 다음 버전에서는 이를 변경하는 것을 목표로 해야 합니다. 나는 그것을 살펴볼 것이다.

@oysteinmoseng 좋아요. 다음 릴리스를 기다리겠습니다.

@jee7 @mbrodala @tejaspchordiya
다가오는 Highcharts v7에서는 highcharts 모듈에 의존하도록 모듈 파일을 변경할 것이며 루트 파일은 이 모듈을 정의할 것입니다. 이렇게 하면 모듈의 초기화 단계가 필요하지 않습니다.

모듈에 대한 로드 순서는 여전히 정확해야 합니다. 왜냐하면 모듈은 (현재로서는) 전역 highcharts 모듈에만 종속되어 있고 다른 모듈에 종속된 모듈에 대한 추가 정보가 포함되어 있지 않기 때문입니다.

로드 예는 다음과 같습니다.

requirejs.config({
    paths: {
        'highcharts': 'http://code.highcharts.com/highcharts',
        'highcharts-exporting': 'http://code.highcharts.com/modules/exporting',
        'highcharts-accessibility': 'http://code.highcharts.com/modules/accessibility'
    }
});

// Try loading after setting up paths. Note that the loading order has to be correct.
requirejs([
    'highcharts',
    'highcharts-exporting',
    'highcharts-accessibility'
], function (Highcharts, exporting, accessibility) {
    Highcharts.chart('container', {
        series: [{
            data: [1,2,3,4,5]
        }]
    });
});

이에 대한 의견이 있으면 가능한 한 빨리 알려주십시오.

@oysteinmoseng Highcharts 소스의 계획된 변경 사항을 이해하고 있는지 잘 모르겠습니다. 일반적으로 예를 들어 highcharts-exporting 모듈은 다음과 같습니다.

define(['highcharts'], function(Highcharts) {
  // ...
});

따라서 다음은 모두 완벽하게 괜찮을 것입니다.

require(['highcharts', 'highcharts-exporting'], function (Highcharts, exporting) {
  // ...
});

require(['highcharts-exporting', 'highcharts'], function (exporting, Highcharts) {
  // ...
});

require(['highcharts-exporting'], function (exporting) {
  // ...
});

따라서 모듈을 설정한 순서와 기본 모듈을 명시적으로 로드하는 것은 중요하지 않습니다.

@mbrodala 실제로 이것이 모듈의 모양이며 모듈과 기본 모듈의 로드에 대해 정확합니다. 그러나 로드 순서는 서로 의존하는 여러 Highcharts 모듈을 로드할 때 적용됩니다. 예를 들어 accessibility 모듈은 exporting 모듈에 종속됩니다. 이 경우 이 시점에서 Highcharts 모듈 파일에 해당 정보를 포함하지 않으므로 순서가 올바른지 확인해야 합니다.

아, 이제 무슨 말인지 알겠습니다. 그러나 이 경우 require() 언급된 모듈의 순서가 로딩 순서에 영향을 미치지 않기 때문에 이것이 작동하는지 확신할 수 없습니다. 모듈은 순서 없이 로드되고 종속 항목은 모든 종속 항목이 로드되는 즉시 로드됩니다. 따라서 내부 종속성을 고려하여 수동으로 모듈을 정렬하더라도 로드 문제가 예상됩니다.

주어진 예에서 ['highcharts', 'highcharts-exporting', 'highcharts-accessibility'] 가 필요한 경우 highcharts-exporting 가 highcharts-accessibility 전에 로드된다는 보장은 없으며 _my_ 모듈만 이러한 모듈보다 먼저 로드되지 않습니다. 따라서 highcharts-accessibility 가 실행되자마자 자동으로 마법을 수행한다면 highcharts-exporting 가 이미 로드되어 있다고 의존할 수 없습니다. 그렇기 때문에 모든 종속성을 명시적으로 선언해야 합니다.

@mbrodala 모듈 로드 순서에 대해 질문이 있습니다.
requirejs와 함께 shim 구성을 사용하여 이 문제를 해결할 수 없습니까?

아 이건 몰랐네요 ㅠ 알려주셔서 감사합니다.

불행히도 그것은 잠재적인 쇼스토퍼입니다. 모듈의 종속성을 추적하는 시스템을 만드는 것이 짧은 시간 안에 할 수 있는 일을 넘어서기 때문에 이 변경을 Highcharts v7.1로 연기해야 ​​할 것 같습니다. 선택적 종속성의 개념(특정 로드 순서가 필요함)과 이를 처리하는 방법도 있습니다.

v7.0 이후에 이 백업을 선택하고 우리가 할 수 있는 일을 볼 것입니다.

편집하다:
shim을 사용하는 잠재적인 해결 방법이 있는 경우 이것이 현재 구현보다 쉬운지 논의할 수 있습니다.

@tejaspchordiya 무엇을 염두에 두고 계십니까? 모듈에 대한 로드 순서를 적용하는 옵션을 알지 못합니다.

shim 구성을 사용하면 기본적으로 버전 6.1.2 이전의 솔루션으로 되돌아가는 것 같습니다. 내가 이해하는 한 AMD 모듈은 shim과 잘 작동하지 않기 때문에 shim은 비 AMD 모듈용입니다.

제 경우에는 제안된 솔루션을 사용하여 단일 이름으로 사용되는 Highcharts의 특정 구성을 원할 때 여전히 고유한 사용자 정의 모듈을 정의해야 합니다.

그러나 예, 모듈이 비동기식으로 로드되므로 순서는 임의적입니다.
종속성은 Highcharts의 모듈 정의에서 정의할 수 있습니다. 이것은 모든 전제 조건 종속성이 올바른 순서로 로드되도록 보장할 것이라고 생각합니다. highcharts-more 모듈이 highcharts 모듈 등에 종속된다는 모듈 정의를 정의해야 합니다.

모듈이 순서대로 종속성을 갖도록 7.1에서 이 문제를 수정할 것입니다. 그러면 심이 필요하지 않습니다. 내보내기는 다음과 같습니다.

define(['highcharts'], function(Highcharts) {
  // ...
});

종속 오프라인 내보내기는 다음과 같습니다.

define(['highcharts', 'exporting'], function(Highcharts, exporting) {
  // ...
});

이 소리가 맞습니까?

맞는 것 같지만 모든 모듈에 네임스페이스를 갖고 충돌을 피하려면 exporting 대신 highcharts-exporting 를 제안합니다.

참고: 또한 명명된 모듈을 사용하여 사용자가 모듈을 단일 파일로 병합하여 서버 요청을 줄일 수 있는지 확인하십시오.

define('highcharts-offline-exporting', ['highcharts', 'exporting'], function(Highcharts, exporting) {
  // ...
});

실제로 이것은 권장되지 않습니다 . 대신 이것을 RequireJS 옵티마이저에 맡겨야 합니다.

이들은 일반적으로 최적화 도구에 의해 생성됩니다. 모듈의 이름을 명시적으로 지정할 수 있지만 모듈의 이식성이 떨어집니다. 파일을 다른 디렉토리로 이동하는 경우 이름을 변경해야 합니다. 일반적으로 모듈 이름으로 코딩하는 것을 피하고 최적화 도구가 모듈 이름을 태우도록 하는 것이 가장 좋습니다. 최적화 도구는 브라우저에서 더 빨리 로드할 수 있도록 둘 이상의 모듈을 파일에 번들로 묶을 수 있도록 이름을 추가해야 합니다.

@mbrodala 흥미 define(['highcharts', 'highcharts-exporting'], ...) . 내가 그것을 올바르게 이해한다면 우리는 이러한 모듈에 대한 관련 파일에 대한 경로를 정의해야 하는 사용자에게 부담을 줄 것입니다.

requirejs.config({
    paths: {
        'highcharts': 'highcharts',
        'highcharts-exporting': 'modules/exporting',
        'highcharts-accessibility': 'modules/accessibility'
    }
});

맞습니다. 매우 장황한 버전에서는 이것이 갈 길입니다. 물론 일반적으로 RequireJS가 baseUrl 사용하여 모든 Highcharts 모듈을 자동으로 해결할 수 있도록 하는 방식으로 자산을 빌드하려고 합니다. 그러나 여기서 Highcharts는 할 일이 없습니다. ;-)

내부 토론 후 우리는 모듈을 다음과 같이 정의하고자 하는 다음 제안에 착안했습니다.

// Example of modules/offline-exporting.src.js
define(
    'highcharts/modules/offline-exporting',
    ['highcharts', 'highcharts/modules/exporting'],
    function (Highcharts) {
        ...
    }
)

이전 제안과 달리 모듈 이름을 지정하려는 이유는 모듈이 여러 번 로드 및 실행되는 것을 방지할 수 있기 때문입니다.

그런 다음 구성을 설정하는 데 권장하는 방법은 다음과 같습니다.

require.config({
    packages: [{
        name: 'highcharts',
        main: 'highcharts'
    }],
    paths: {
        // Change this to your server if you do not wish to use our CDN.
        'highcharts': 'https://code.highcharts.com'
    }
});

또한 Highcharts 인스턴스에서 모듈 팩토리 함수를 실행하고 수정된 인스턴스를 반환된 모듈의 속성으로 제공하고 싶습니다.
그러면 사용법은 다음과 같을 수 있습니다.

require([
    'highcharts/modules/exporting',
    'highcharts/modules/accessibility'
    // This function runs when the above files have been loaded.
], function ({ Highcharts }) {
    // Create a test chart.
    Highcharts.chart('container', {
        series: [{
            data: [1,2,3,4,5]
        }]
    });
});

이전 패턴 대신:

require([
    'highcharts',
    'highcharts/modules/exporting',
    'highcharts/modules/accessibility'
    // This function runs when the above files have been loaded.
], function (Highcharts, ExportingModule, AccessibilityModule) {
    // We need to initialize module files and pass in Highcharts.
    ExportingModule(Highcharts);
    // Load exporting before accessibility.
    AccessibilityModule(Highcharts);
    // Create a test chart.
    Highcharts.chart('container', {
        series: [{
            data: [1,2,3,4,5]
        }]
    });
});

@bre1470 과 @oysteinmoseng이 여기에서 잘못되었거나 이 의견에서 뭔가를 놓친 경우 저를 수정해 주세요.

이 제안에 대한 의견을 자유롭게 보내주십시오.

모듈의 이름을 지적하자면 - 이것이 논란이 되는 이유는 모듈이 디렉토리 구조에서 이동할 수 없기 때문인 것 같습니다. 우리는 모듈이 종속 모듈을 로드할 수 있도록 구조를 고정해야 하므로 이를 허용하지 않아야 합니다.

@oysteinmoseng
사실, 적어도 내 테스트에서는 다음과 같이 패키지의 모듈을 다시 매핑할 수 있습니다.

require.config({
    packages: [{
        name: 'highcharts',
        main: 'highcharts'
    }],
    paths: {
        'highcharts': 'https://code.highcharts.com'
        'highcharts/modules/exporting': 'http://code.highcharts.local/modules/exporting'
    }
});

이렇게 하면 반론이 해결됩니까?

이 문제가 종료된 이유는 무엇입니까?
저는 Highchart 7.1.1을 사용하고 있으며 클라이언트 측 모듈을 올바르게 요구할 수 없습니다.

Requirejs 구성:

    map: {
        '*': {
            //charts: 'js/highcharts' <-- I also tried this one
        }
    },
    paths: {
        charts: 'js/highcharts'
    },
    shim: {
        charts: {
            exports: 'Highcharts',
            deps: ['jquery']
        }
    }

파일이 내 브라우저에 올바르게 로드되었습니다.

그러나 내 모듈에서는 정의되지 않습니다.

define([
    'jquery',
    'charts'
], function ($, charts) {
    console.log(charts); //Undefined
    console.log(Highcharts); //Throws an error "Highcharts not defined"

참고: js/highcharts 는 node_modules/highcharts/highcharts.js 가리킵니다.
어떤 아이디어라도?

@vincentwinkel Highcharts는 이제 AMD를 지원하므로 shim 구성이 필요하지 않습니다. 대신 위의 설명에 설명된 대로 Highcharts 패키지를 구성해야 합니다. 여전히 문제가 발생하면 언제든지 지원 팀 에

map / path shim 있거나 없는 모든 조합을 시도했지만 아무 것도 작동하지 않습니다.
Highcharts 6.1.1을 사용해 보았는데 shim 없이 제대로 작동합니다.
따라서 제 생각에는 Highcharts 7.1.1에 확실히 문제가 있습니다.

[편집] 감사합니다. 위의 제안을 확인하겠습니다. 하지만 말씀하신 것처럼 AMD를 지원하는 경우 추가 구성을 작성할 필요가 없습니다.

안녕하세요,

나는 다음과 같이 작동하도록 만들었습니다.

require.config({
    packages: [{
        name: 'highcharts',
        main: 'highcharts'
    }],
    paths: {
        // Change this to your server if you do not wish to use our CDN.
        'highcharts': 'https://code.highcharts.com'
    }
});

이것이 어떻게든 공식 문서의 일부가 되도록 요청해도 됩니까? 그래서 github 문제의 주석 2348445에서 이것을 개별적으로 찾을 필요가 없습니까?

이에 대한 문서가 없는 진짜 이유는 requirejs 인터페이스가 실제로 더 이상 사용되지 않기 때문이라면 최대한 빨리 알려주세요 :-) 우리가 필요하기 때문입니다!

안녕하세요 @pmorch , 알려주셔서 감사합니다.

현재 로서는 CDN 에서

Highcharts를 로드하는 다양한 스타일은 불행히도 현재 일반 문서에 문서화되어 있지 않지만 이 정보가 여기에도 포함되는지 확인할 것입니다.

안녕하세요 @pawelfus입니다.
github의 모든 문서와 문제를 살펴보았지만 6.1.2 이후 버전에서 Highchart 모듈을 올바르게 로드하는 방법을 여전히 이해할 수 없었습니다.

highchart-3d 모듈로 예제를 만들었습니다. http://jsfiddle.net/3ugb2e1q/
보시다시피 차트는 여전히 평평합니다. 반면 동일한 유사한 코드 https://jsfiddle.net/cf4Lv6u3/ 는 예상대로 작동합니다.
factory(Highcharts) 함수가 실행되지 않는 것 같습니다.

} else if (typeof define === 'function' && define.amd) {
        define('highcharts/highcharts-3d', ['highcharts'], function (Highcharts) {
            factory(Highcharts);
            factory.Highcharts = Highcharts;
            return factory;
        });

실제 사례를 알려 주시겠습니까?

7.0.3에서 내가하고있는 일은 다음과 같습니다.

app.js :

requirejs.config({
    baseUrl: '/js',
    paths: {
        'highcharts': 'https://code.highcharts.com/7.0.3/highcharts.src',
        'highcharts-more': 'https://code.highcharts.com/7.0.3/highcharts-more.src',
        'highcharts-exporting' : 'https://code.highcharts.com/7.0.3/modules/exporting',
        'highcharts-wordcloud' : 'https://code.highcharts.com/7.0.3/modules/wordcloud',
        'highcharts-sunburst' : 'https://code.highcharts.com/7.0.3/modules/sunburst',
        'highcharts-annotations' : 'https://code.highcharts.com/7.0.3/modules/annotations',
        'highcharts-streamgraph' :  'https://code.highcharts.com/7.0.3/modules/streamgraph',
        'highcharts-serieslabel' :  'https://code.highcharts.com/7.0.3/modules/series-label',
   }
});

하이 차트에는 심이 없습니다.

그런 다음 Highcharts에 대해 원하는 특정 구성에 대한 모듈이 있습니다.
예를 들어 modules/highcharts.js :

define([
    'jquery', 'highcharts', 'highcharts-more', 'highcharts-exporting', 'highcharts-serieslabel'
], function(
    $, Highcharts, HighchartsMore, HighchartsExporting, HighchartsSerieslabel) {

    var HS = function() {
        HighchartsMore(Highcharts);
        HighchartsExporting(Highcharts);
        HighchartsSerieslabel(Highcharts);
    };

    new HS();

    return Highcharts;
});

또는 예를 들어 modules/somethingElse/highcharts.js :

define([
    'jquery', 'highcharts', 'highcharts-more', 'highcharts-exporting', 'highcharts-wordcloud', 'highcharts-sunburst',
    'highcharts-annotations', 'highcharts-streamgraph', 'highcharts-serieslabel'
], function(
    $, Highcharts, HighchartsMore, HighchartsExporting, HighchartsWordcloud, HighchartsSunburst,
    HighchartsAnnotations, HighchartsStreamgraph, HighchartsSerieslabel) {

    var HC = function() {
        HighchartsMore(Highcharts);
        HighchartsExporting(Highcharts);
        HighchartsWordcloud(Highcharts);
        HighchartsSunburst(Highcharts);
        HighchartsAnnotations(Highcharts);
        HighchartsStreamgraph(Highcharts);
        HighchartsSerieslabel(Highcharts);
    };

    new HC();

    return Highcharts;
});

그리고 stats.js 와 같은 다른 모듈에서 사용하고 싶을 때 :

define(['jquery', 'modules/highcharts'], function($, Highcharts) {

    var Stats = function(...) {
        ...
    };

    Stats.prototype = {
         initMyCharts: function() {
              $('...').highcharts({
                    ...
              });
         }
    }

    return Stats;
});

그러나 이것은 이 스레드에서 이해한 바와 같이 7.0.3을 위한 것임을 다시 한 번 주의하십시오. 나중에 로드를 변경했고 이제는 다시 다릅니다.

안녕하세요 @sergevic님 , 권장 접근 방식은 CDN에서 AMD 모듈로 Highcharts 로드에 문서화되어 있습니다. 예를 들어 이에 따라 수정했습니다 .

안녕하세요 requirejs를 사용하여 highstock의 종속성을 로드하는 데 도움을 찾고 있습니다. 하이차트 포럼에 게시됨:
https://www.highcharts.com/forum/viewtopic.php?f=12&t=42874&p=150985#p150985
종속성이 서버에서 제공되고 URL일 때 제대로 작동하는 동안 "정의되지 않음" 문제에 직면합니다. 친절하게 조언합니다. 감사 해요.

안녕하세요 @sina123s 입니다 .

Highcharts는 자체 내부 네임스페이스 highcharts 를 amd에 등록합니다. 이것은 내부 종속성을 로드할 수 있도록 하기 위한 것입니다. 예를 들어 highcharts/modules/stock 는 자동으로 필요한 highcharts 모듈입니다.
이는 highstock 가 requirejs에 등록된 모듈을 참조하지 않는다는 것을 의미합니다. 이는 모듈에 액세스하는 데 필요한 highcharts/highstock id로 등록되어 있기 때문입니다.

또한 CDN에서 AMD 모듈로 로드 하이차트에 설명된 구성을 맞게 수정하는 것이 좋습니다.

안녕하세요 종속성과 관련된 몇 가지 문제가 있습니다. 현재 서버에 Highcharts 패키지가 있지만 모듈에는 highstock.js가 없습니다. 따라서 파일을 다운로드하여 내 VM 디렉터리에 저장했습니다. 동일한 구성과 같도록 코드를 수정하려고 했습니다. 현재 정의되지 않은 오류가 발생하므로 원하는 결과를 얻기 위해 코드를 수정할 수 있는 위치를 아는 것이 좋습니다. 죄송합니다. 혼란스럽고 인터넷 검색에서 가능성을 시도했지만 아무데도 도달하지 못했기 때문에 코드가 엉망이 된 것 같습니다!

requirejs.config({
패키지: [{
이름: '하이차트',
메인: '하이차트'
}],
경로: {
jquery: "js/jquery/jquery",
"datatables.net": "js/datatables/js/jquery.dataTables.min",
"datatables.net-css": "js/datatables/css/jquery.dataTables.min",
tippy: "js/tippy.all.min",
fixedHeader: "js/datatables/js/dataTables.fixedHeader.min",
"fixedHeader-css": "js/datatables/css/fixedHeader.dataTables.min",
jquerymin: "js/jquery-1.10.2.min",
colpick: "js/colpick",
colpickcss: "css/colpick",
highstock: "js/highstock"
},
심: {
"datatables.net": ["jquery", "css!datatables.net-css"],
fixedHeader: ["css!fixedHeader-css"],
colpick: ["css!colpickcss"]
}
});
require.config({
우선 순위: ["jquery", "jquerymin", "colpick"]
});
필요하다([
"jquery", "tippy", "DS/3DXHighcharts/3DXHighcharts", "highstock", "datatables.net", "fixedHeader", "jquerymin", "colpick"],
기능(
$, tippy, Highcharts, highstock )

그런 다음 Highcharts.stockChart()를 사용할 때 정의되지 않은 오류가 발생합니다.

안녕하세요...이 작업을 수행할 가능성이 있습니까?

안녕하세요 @sina123s님 , 귀하의 코드와 관련된 예제를 만들

안녕하세요 @sina123s 입니다 .

다음은 로컬 소스 폴더에서 Highcharts를 로드하도록 RequireJS를 구성하는 방법을 보여주는 예입니다. https://codesandbox.io/s/static-jixls

이 예에서는 highstock.js 를 기본으로 설정했지만 일반적으로 가장 유연한 솔루션은 highcharts.js 를 기본으로 사용하고 highcharts/modules/stock 를 종속성으로 로드하는 것입니다.
이는 일부 모듈이 highcharts/modules/stock 에 대한 내부 종속성을 가질 수 있기 때문에 highstock.js 가 기본이면 이 경우 일부 코드가 두 번 로드됩니다. 오류가 발생하지는 않지만 앱의 번들 크기가 불필요하게 증가합니다.

안녕하세요 @jon-a-nygaard 예를 들어주셔서 감사합니다. 내가 아파서 이것을 테스트 할 기회를 얻지 못했기 때문에 대답 할 수 없었습니다. 하지만 여전히 문제가 있습니다. 하이 차트에 대한 내 서버 폴더는 다음과 같습니다.

모듈 디렉토리에서 highstock을 찾지 않기 때문에 Highstock.js를 다운로드하고 디렉토리 중 하나에 배치하고 requirejs.config에서 참조하려고 합니다. Highcharts 또는 highstock만 또는 둘 다에 대한 참조를 계속 포함해야 합니까? 내 요점을 분명히 할 수 있기를 바랍니다.

안녕하세요 @sina123s

Highcharts v4.0.3을 사용하는 것 같습니다. v7로 업데이트를 시도하셨습니까?

참고: Highstock with Highcharts v4.0.3을 주문하려면 Highstock v2.0.3( 링크 )이 필요합니다. 당시에는 stock 모듈이 없었습니다.

안녕하세요 흥미롭게도 이것을 찾았습니다.

그러나 highstock 파일을 참조하기 위해 내 코드에서 이러한 경로를 수용하는 방법을 잘 모르겠습니다. "DS/SMAHighcharts/Highcharts"가 있을 때 올바른 경로를 얻지 못하고 정의되지 않은 오류가 발생합니다. 이 작업을 수행할 수 있는 방법이 있습니까?

안녕하세요 @sina123s님 , 마지막 질문을 제대로 이해했는지 잘 모르겠습니다.
그러나 주식 모듈과 함께 Highcharts를 사용하려면 https://codesandbox.io/s/static-lo70d 에서와 같이 할 수 있습니다.
그렇지 않으면 Highstock을 사용하려는 경우 https://codesandbox.io/s/static-jixls 에서와 같이 할 수 있습니다

두 경우 모두 require.config 에서 제공되는 paths.highcharts 는 Highcharts 파일이 있는 폴더를 가리켜야 합니다. 이 폴더는 마지막 주석에서 DS/SMAVenHighcharts/6.0.7/ 처럼 보입니다. 이를 바탕으로 구성이 다음과 같아야 한다고 생각합니다.

```
requirejs.config({
경로: {
하이차트: "DS/SMAVenHighcharts/6.0.7"
}
})

코드를 다음과 같이 수정했습니다.
requirejs.config({
경로: {
....
하이차트: "DS/SMAVenHighcharts/6.0.7"
},
패키지: [
{
이름: "하이차트",
// highcharts.js를 메인으로 설정
메인: "하이차트"
}
]
});
require(["jquery", "tippy", "DS/WAFData/WAFData", "DS/i3DXCompassServices/i3DXCompassServices", "DS/PlatformAPI/PlatformAPI",
"DS/DataDragAndDrop/DataDragAndDrop","DS/LifecycleControls/EditPropDialog", "highcharts", "highcharts/modules/stock"

하지만 이제 다음과 같은 스크립트 오류가 발생합니다.
RequireJS 오류 유형: 모듈에 대한 "스크립트 오류": ["highcharts/modules/stock"]
잡히지 않은 오류: 스크립트 오류: highcharts/modules/stock
AmdLoader.js:1 잡히지 않은 오류: 스크립트 오류: highcharts/highcharts

그러나 SMAVenHighcharts/6.0.7/modules/stock.js 경로는 정확합니다.
죄송합니다. Highstock 라이브러리를 사용할 수 있도록 이 문제를 어디에서 어떻게 수정해야 하는지 모르겠습니다. 나는 이것을 작동시키기 위해 오랫동안 노력했지만 성공하지 못했습니다.

참고 사항: 저는 Dassault Systemes의 라이브러리를 사용하고 있으며 Highchart에서만 작동할 때 highchart js 파일만 사용하고 모듈은 고려하지 않는다는 것을 알게 되었습니다. 나는 자바스크립트를 알고 있지만, 이 개념은 내 머리에 조금 들어오지 않는다! 따라서 사용에 대해 안내할 수 있는 사람이 있으면 친절하게 조언하십시오. 감사 해요.

안녕하세요 @sina123s , 프로젝트의 라이브 재생산을 제공할 수 있습니까? 문제의 원인을 이해하는 데 도움이 될 수 있다고 생각합니다.
프로젝트에 민감한 정보나 개인 정보가 포함된 경우 [email protected]으로 문의할 수도 있습니다

안녕하세요..죄송합니다. 프로젝트의 라이브 재생산을 제공하지 못하거나 민감한 정보가 포함된 코드를 공유할 수 없을 것 같습니다. 경로 shim 등에 관한 코드는 아래와 같으며, 모듈 디렉토리 및 기타 파일을 제외하고 js 파일만 로드됩니다. :
require.config({
경로: {
"DS/SMAVenHighcharts": a
},
심: {
"DS/SMAVenHighcharts": {
내보내기: "하이차트"
}
}
})
define("DS/SMAHighcharts/Highcharts", ["../SMAVenHighcharts/6.0.7/highcharts"], function(a) {
반환
});

그것이 내가 추측하는 스크립트 오류가 발생하는 이유입니다.
또한 requirejs.config 부분의 예제와 같이 경로를 지정하지 않고 undefined로 표시하기 때문에 경로를 지정할 수도 없습니다.

안녕하세요 @sina123s 입니다 .

이제 문제의 구체적인 버전을 보여주실 때가 된 것 같습니다. 현재 제공할 수 있는 예에 민감한 정보가 포함되어 있다면 아직 문제를 줄이는 데 충분한 시간을 들이지 않은 것입니다. 예를 들어 https://stackoverflow.com/help/minimal-reproducible-example을 참조

제 생각에는 @jon-a-nygaard가 지금까지 나온 것 이상이었습니다. 이제 당신이 우리와 그에게 _당신이 겪고 있는 정확한 문제를 보여주는_ 구체적이고 작고 읽기 쉬운 예를 제공할 차례입니다.

부작용으로 문제를 점점 더 작게 만들고 독점 및 관련 없는 부분을 제거하는 과정에서 스스로 답을 찾을 수 있을 것이라고 75% 확신합니다... 정말 매우 강력한 방법입니다. 자체적으로 디버깅하는 것입니다.

또한 게시하는 코드 조각의 형식을 지정하는 방법을 배우십시오. 게시한 코드를 읽을 수 없습니다. 예를 들어 Markdown 마스터링의 '구문 강조 표시' 참조

예, 이 모든 작업에는 시간이 걸립니다. 하지만 장기적으로 보면 도움을 줄 사람이 없다면 도와줄 사람을 찾는 것보다 더 짧은 시간이 걸립니다... :-)