Highcharts: 依存するHighchartsモジュールまたはhighchartsのロード-RequireJSを介した詳細はバージョン6.1.2から失敗します。

作成日 2018年09月04日  ·  51コメント  ·  ソース: highcharts/highcharts

RequireJSを使用して、サイトの特定のページにHighchartsを動的にロードしています。 私はそれをshimで構成して、highchartsをロードしました-私が使用しているその他のモジュール。 数日前からHighchartCDNのバージョン6.1.2アップデートで、highcharts-moreとモジュールを正しくロードできないようになりました。

期待される動作

ハイチャート-その他のモジュールの機能を使用できることを期待しています。

実際の動作

ファイルはフェッチされますが、Highchartsの初期化は、 arearangeおよびその他の奇妙な動作のエラーコード17の不明なグラフタイプで失敗します。 たとえば、極域の面グラフは極座標ではありません。
実際のファイルをフェッチしますが、何らかの理由で追加機能を考慮しなくなりました。

再現手順のあるライブデモ

Highcharts 6.1.1での作業デモ: http ://jsfiddle.net/3kpazfw4/
CDNで失敗するデモ: http

製品バージョン

ハイチャート6.1.2

影響を受けるブラウザ

Chrome68。

High Enhancement

最も参考になるコメント

こんにちは@ sina123s

あなたが問題の具体的なバージョンを私たちに示した時だと思います。 現在提供できる例に機密情報が含まれている場合は、まだ問題を軽減するのに十分な時間を費やしていません。 たとえば、 https ://stackoverflow.com/help/minimal-reproducible-exampleを参照して

私の意見では、@ jon-a-nygaardはこれまで以上に近づいています。 今度は、私たちと彼に、_あなたが経験している正確な問題を示す_具体的で小さくて読みやすい例を提供する番です。

副作用として、私は75%確信しています。問題をどんどん小さくし、独自の無関係な断片を削除する途中で、自分で答えを見つけることができます...これは本当に非常に強力な方法です。それ自体でデバッグの

また、投稿するコードスニペットのフォーマットについても学んでください。 投稿したコードは判読できません。 たとえば、 Mastering Markdown・GitHubGuidesの

はい、これにはすべて時間がかかります。 しかし、長期的には、助けてくれない人を見つけるよりも短い時間で済みます... :-)

全てのコメント51件

こんにちは@ jee7

この問題を報告していただきありがとうございます。 あなたは正しいです、何かが間違っています。 これを確認します。

内部メモ:
@oysteinmoseng CDNの同じデモ:

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

責任あるコミット: https

6.1.2 HighchartsはAMDの読み込みをサポートしているため、シミングは不要になります。 ただし、AMDのロードでは、追加の初期化手順を実行する必要があります。 これがデモの失敗の原因です。

RequireJSを使用したHighchartsのロードの詳細については、ここを参照してください。

とりあえずこの問題をクローズしますが、さらに問題が発生した場合は、お気軽に再開してください。

ご回答ありがとうございます。 応答が遅れて申し訳ありませんが、うまく機能したと思います。

基本的に、私は自分のサイトの特定のページにロードされる独自のRequireJSモジュールを多数持っています。 それらのいくつかはHighchartsを使用し、いくつかは使用しません。 したがって、新しいHighcharts初期化をメインのrequirejs()呼び出しに入れたくありません(例に示されているように)。 そうすれば、使用されていなくても、常にすべてのページに読み込まれます。 以前はshimを使用して、必要に応じて1つのhighcharts依存関係を含めることができ、正しく構成されていることを確認しました。

したがって、私の最初のアプローチは、新しい依存性注入をモジュールの1つに入れて、それが機能するかどうかを確認することでした。 そして、それはしました。

このようにして、自分のモジュールごとに実際にロードされるHighchartsモジュールをより細かく制御できることがわかります。 ただし、Highchartsを使用する各モジュールの上に、それほど長い依存性注入コードを配置して複製したくないので、Highcharts構成のみを実行する他のモジュールを少数作成することになりました。

また、Highchartsを自分のモジュールに1回注入するだけで済みます。

動作しているようです。

@mbrodalaによって提案されているように、パターンに関する議論のためにこれを再開します

これをもう一度始めるために、#8916からの私のコメント:

それで、これを理解することは、ユーザーがhighchartsという名前のモジュール以外のものをロードし、これをHighchartsとしてさまざまなHighchartsモジュールに渡すことができるようにすることです。 これが本当に必要な頻度はわかりませんが、現在の状態は混乱していて、不完全だと感じていると言えます。 結局のところ、依存関係をいじくり回さないようにRequireJSを使用しているので、これをユーザーに強制することが最善の方法かどうかはわかりません。

Highchartsを統合している他のAMDユーザーにワークフローについて聞いてみたいと思います。 特に、現在の柔軟性が本当に必要な場合、またはすべてのHighchartsモジュールがHighchartsオブジェクトを注入するためにhighchartsという名前のモジュールを単純に必要とする場合は、全員が問題ない場合は特にそうです。

私が理解している限り、すべてのページにすべての追加のHighchartsモジュールが必要なわけではないという考えです。 たとえば、サンバーストプロットを表示するページと、ストリームグラフプロットを表示する別のページを作成できます。 ユーザーが両方のページのサンバーストプロットとストリームグラフプロットの両方のコードをロードする必要はありません。

ただし、これは、どのページがどの追加のHighchartsモジュールを使用するかを具体的に構成する必要があることを意味します。 shim configを使用すると、怠惰になり、メインのHighchartモジュールの依存関係として使用した他のすべてのモジュールを追加しました。

今AMDで私も少し怠惰です。 私のウェブサイトは、実際にはいくつかのモジュール自体で構成されています。 それらをセクションと呼びましょう。 彼らは学生、教師、論文、論文と名付けられています。 しかし、一般化のために、ユーザー、有料ユーザー、管理者などのセクションについて考えることができます。 または、異なるドメインオブジェクトに基づくセクション。 そこで私がしたことは、これらのセクションごとにHighcharts用に独自のAMDモジュールを作成することでした。 基本的に私はjs/modules/student/highchartsjs/modules/teacher/highchartsjs/modules/theses/highchartsなどを持っています。それらはすべて、特定のセクションの下のすべてのページで使用する機能に応じて、Highchartsを異なる方法で構成します。 私の以前の投稿を参照してください(何らかの理由でスクリーンショットが以前に消えていました)。

設定だけで似たようなことができたら良かったのにと思います。 私がシムでやっていたように。 次に、依存性注入の内容をすべて、モジュールの定義内ではなく、単一の構成ファイルに保持することができます。 実際の注入は、構成に基づいて自動的に実行できます。 今、私はAMDにそれほど経験がなく、精通していませんが、私が読んだ限りでは、AMDモジュールのshimconfigを作成することは悪い考えです。

そのため、現在、ハイチャートの特定の組み合わせをロードできるようにする別の方法はありません。 しかし、基本的なHighcharts機能を使用するページには1〜2個のJSファイルのみをロードし、10個の異なるHighchartsモジュールの機能を使用するページには最大10個のJSファイルをロードできるようにしたいと思います。

ただし、1つの方法は、CDNからHighchartsをロードするときに、どのモジュールを含めて準備するかをURLパラメーターとして指定することです。 グーグルがグーグルフォントでするようなもの。 このようなもの: https://code.highcharts.com/highcharts?modules=more,sunburst,streamgraph

次に、RequireJSでは、Highchartsのさまざまな構成に異なる名前を付けることができ、使用時にCDNから1つのファイルのみをロードし、自分でDIを実行する必要はありません。

私は彼の言う@mbrodalaに同意します:

それで、これを理解することは、ユーザーがhighchartsという名前のモジュール以外のものをロードし、これをHighchartsとしてさまざまなHighchartsモジュールに渡すことができるようにすることです。 これが本当に必要な頻度はわかりませんが、現在の状態は混乱していて、不完全だと感じていると言えます。 結局のところ、依存関係をいじくり回さないようにRequireJSを使用しているので、これをユーザーに強制することが最善の方法かどうかはわかりません。

RequireJSを使用してHighchartsライブラリをロードします。 Highchartsオブジェクトを注入するために単にhighchartsを要求する以前の方法の方が優れていると思います。これは、現在の状態が混乱しているだけでなく、最新バージョンのHighchartsへのアップグレードを制限しているためです。

@oysteinmosengこれに関連する更新はありますか?

@TorsteinHonsi @pawelfus

@tejaspchordiyaほとんどのユーザーが構成ルートを好むことは明らかだと思うので、次のバージョンでこれを変更することを目指す必要があります。 見ていきます。

@oysteinmosengわかりました。 次のリリースを待ちます。

@ jee7 @mbrodala @tejaspchordiya
今後のHighchartsv7では、モジュールファイルを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]
        }]
    });
});

ご意見がございましたら、お早めにご連絡ください。

@oysteinmosengHighchartsソースで計画されている変更を理解しているかどうかはわかりません。 通常、たとえば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-exportinghighcharts-accessibility前にロードされるという保証はなく、_my_モジュールがこれらのいずれの前にもロードされないという保証はありません。 したがって、 highcharts-accessibilityが実行されるとすぐに自動的に何らかの魔法を実行する場合、 highcharts-exportingがすでにロードされていることに依存することはできません。 そのため、すべての依存関係を明示的に宣言する必要があります。

@mbrodalaモジュールのロード順序についての懸念について、質問があります。
requirejsでshimconfigを使用してこの問題を解決できませんか?

ああ、私はこれに気づいていませんでした、明確にしてくれてありがとう。

残念ながら、それは潜在的なショートッパーです。 モジュールの依存関係を追跡するシステムを作成することは、短期間で実行できることを超えているため、この変更をHighchartsv7.1に延期する必要があるようです。 オプションの依存関係(特定のロード順序が必要)の概念と、これを処理する方法もあります。

これをv7.0以降に取得し、何ができるかを確認します。

編集:
シムを使用した潜在的な回避策がある場合は、これが現在の実装よりも簡単かどうかを検討できます。

@tejaspchordiya何を考えていますか? モジュールのロード順序を強制するオプションを認識していません。

shim configを使用すると、基本的にバージョン6.1.2より前のソリューションに戻るようです。 シムは非AMDモジュール用であるため、私が理解している限り、AMDモジュールはシムではうまく機能しません。

私の場合、提案されたソリューションでは、Highchartsの特定の構成を単一の名前で使用する場合でも、独自のカスタムモジュールを定義する必要があります。

しかし、はい、モジュールは非同期でロードされるため、順序は任意になります。
依存関係は、Highchartsのモジュールの定義で定義できます。 これにより、すべての前提条件の依存関係が正しい順序で読み込まれるようになると思います。 highcharts-moreモジュールがhighchartsモジュールなどに依存していることをモジュール定義で定義する必要があります。

モジュールが順番に依存関係を持つように、7.1でこれを修正します。 これにより、シムが不要になります。 エクスポートは次のようになります。

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

そして、依存するオフラインエクスポートは次のようになります。

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

この音は正しいですか?

ほぼ正しいように聞こえますが、すべてのモジュールに名前空間を設定して競合を回避するには、 exportingだけでなくhighcharts-exporting勧めします。

注:また、名前付きモジュールを使用して、ユーザーがモジュールを1つのファイルにマージして、サーバー要求を減らすことができるようにしてください。

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

ファイルは私のブラウザに正しくロードされています:

Screen Shot 2019-05-06 at 15 47 17

しかし、私のモジュールでは、それは未定義です:

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

注: js/highchartsnode_modules/highcharts/highcharts.js指します。
何か案が?

@vincentwinkel HighchartsがAMDをサポートするようになったため、shim構成は必要ありません。 代わりに、上記のコメントで概説されているようにHighchartsパッケージを構成する必要があります。 それでも問題が発生する場合は、特定のケースについてサポートチームにお気軽にお

map / pathshim有無にかかわらず、すべての組み合わせを試しましたが、何も機能しません。
Highcharts 6.1.1を使用してみましたが、 shimなくても正しく動作します。
したがって、私の意見では、Highcharts7.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 、私たちに知らせてくれてありがとう。

この情報は、今のところ、AMDモジュールとしてCDNからのLoadHighchartsのreadmeにもあります。

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からのLoad HighchartsにAMDモジュールとして文書化されています。例として、これらに従って変更しました

こんにちは私はrequirejsを使用してhighstockの依存関係をロードする際のヘルプを探しています。 highchartsフォーラムに投稿:
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に登録されているモジュールを参照していないことを意味します。これは、モジュールにアクセスするために使用する必要があるID highcharts/highstockで登録されているためです。

また、CDNからのハイチャートのロードで説明されている構成を

こんにちは私は依存関係にいくつかの問題があります。 現在、サーバーにHighchartsパッケージがありますが、モジュールにhighstock.jsがありません。 したがって、ファイルをダウンロードして、VMディレクトリに保存しました。 同じ構成のようにコードに対応するように変更しようとしました。 現在未定義のエラーが発生しているので、コードを修正して目的の結果を得ることができる場所を知っておくと便利です。 申し訳ありませんが、私は混乱し、グーグルからの可能性を試しましたが、どこにも到達しなかったため、コードがすべて台無しになっていると思います!

requirejs.config({
パッケージ:[{
名前: 'highcharts'、
main: 'highcharts'
}]、
パス:{
jquery: "js / jquery / jquery"、
"datatables.net": "js / datatables / js / jquery.dataTables.min"、
"datatables.net-css": "js / datatables / css / jquery.dataTables.min"、
ティッピー: "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"、
ハイストック: "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がメインの場合、この場合、一部のコードが2回ロードされます。 エラーは発生しませんが、アプリのバンドルサイズが不必要に大きくなります。

こんにちは@ jon-a-nygaard例をありがとう。 私は病気で、これをテストする機会がなかったので、返信できませんでした。 しかし、それでも私には問題があります。 ハイチャートのサーバーフォルダは次のようになります。
highcharts_server
modulesディレクトリでhighstockを検索していないので、Highstock.jsをダウンロードして、ディレクトリの1つに配置し、requirejs.configで参照しようとしました。 ハイチャートまたはハイストックのみ、あるいはその両方への参照を含める必要がありますか? 私の主張を明確にできるといいのですが。

こんにちは@ sina123s

Highchartsv4.0.3を使用しているようです。 v7にアップデートしようとしましたか?

注:Highcharts v4.0.3でHighstockを使用するには、Highstock v2.0.3(リンク)が必要です。 当時、 stockモジュールはありません

こんにちは興味深いことに私はこれを見つけました:
image
しかし、highstockファイルを参照するためにコードでこれらのパスに対応する方法がわかりません。 「DS / SMAHighcharts / Highcharts」を使用していると、正しいパスが取得されず、未定義としてエラーが発生します。 これを扱う方法はありますか?

こんにちは@ sina123s 、私はあなたの最後の質問を正しく理解したかどうかはよくわかりません、
ただし、ストックモジュールでHighchartsを使用する場合は、 https: //codesandbox.io/s/static-lo70dのように実行でき
それ以外の場合、Highstockのみを使用する場合は、 https: //codesandbox.io/s/static-jixlsのように実行でき

どちらの場合も、 paths.highchartsで提供されるrequire.configあなたの最後のコメントのルックスからのようなものにするためにどの、あなたはHighchartsファイルがあるフォルダを指すように持っているDS/SMAVenHighcharts/6.0.7/ 。 これに基づいて、構成は次のようになるはずです。

`` `
requirejs.config({
パス:{
highcharts: "DS / SMAVenHighcharts / 6.0.7"
}
})

コードを次のように変更しました。
requirejs.config({
パス:{
...。
highcharts: "DS / SMAVenHighcharts / 6.0.7"
}、
パッケージ:[
{{
名前: "highcharts"、
//highcharts.jsをメインとして設定します
main:「highcharts」
}
]
});
require(["jquery"、 "tippy"、 "DS / WAFData / WAFData"、 "DS / i3DXCompassServices / i3DXCompassServices"、 "DS / PlatformAPI / PlatformAPI"、
"DS / DataDragAndDrop / DataDragAndDrop"、 "DS / LifecycleControls / EditPropDialog"、 "highcharts"、 "highcharts / modules / stock"

しかし今、私はいくつかのスクリプトエラーを受け取ります、次のようなものです:
RequireJSエラータイプ:モジュールの「scripterror」:["highcharts / modules / stock"]
キャッチされないエラー:スクリプトエラー:highcharts / modules / stock
AmdLoader.js:1 Uncaught Error:Script error for:highcharts / highcharts

ただし、パスSMAVenHighcharts / 6.0.7 / modules /stock.jsは正しいです。
申し訳ありませんが、Highstockライブラリを使用できるように、これをどこでどのように修正するかわかりません。 私はこれを機能させるために長い間努力してきましたが、成功しませんでした。

注:私はDassault Systemesのライブラリを使用していますが、Highchartsだけで動作する場合、highchart jsファイルのみを取り、モジュールを考慮しないことに気づきました。 私はjavascriptを知っていますが、この概念は少し頭に浮かびません! ですから、それを使用するためのガイドとなる可能性のある人がいる場合は、親切にアドバイスしてください。 ありがとう。

こんにちは@ sina123s 、あなたはあなたのプロジェクトのライブ複製を提供することができますか? 問題の原因を理解するのに役立つと思います。
プロジェクトに機密情報や個人情報が含まれている場合は、 support @ highcharts.comまでご連絡

こんにちは..申し訳ありませんが、機密情報が含まれているため、プロジェクトのライブ複製を提供したり、コードを共有したりすることができないのではないかと心配しています。 パスシムなどに関するコードがあり、以下のようなものがあり、モジュールディレクトリやその他のファイルを除いて、それに応じてjsファイルのみがロードされます。 :
require.config({
パス:{
「DS / SMAVenHighcharts」:a
}、
シム:{
"DS / SMAVenHighcharts":{
エクスポート:「Highcharts」
}
}
})
define( "DS / SMAHighcharts / Highcharts"、["../ SMAVenHighcharts / 6.0.7 / highcharts"]、function(a){
を返す
});

それが私が推測するスクリプトエラーを受け取る理由です。
また、requirejs.configの部分の例のようにパスを指定することもできません。これは、パスが考慮されておらず、未定義であるためです。

こんにちは@ sina123s

あなたが問題の具体的なバージョンを私たちに示した時だと思います。 現在提供できる例に機密情報が含まれている場合は、まだ問題を軽減するのに十分な時間を費やしていません。 たとえば、 https ://stackoverflow.com/help/minimal-reproducible-exampleを参照して

私の意見では、@ jon-a-nygaardはこれまで以上に近づいています。 今度は、私たちと彼に、_あなたが経験している正確な問題を示す_具体的で小さくて読みやすい例を提供する番です。

副作用として、私は75%確信しています。問題をどんどん小さくし、独自の無関係な断片を削除する途中で、自分で答えを見つけることができます...これは本当に非常に強力な方法です。それ自体でデバッグの

また、投稿するコードスニペットのフォーマットについても学んでください。 投稿したコードは判読できません。 たとえば、 Mastering Markdown・GitHubGuidesの

はい、これにはすべて時間がかかります。 しかし、長期的には、助けてくれない人を見つけるよりも短い時間で済みます... :-)

このページは役に立ちましたか?
0 / 5 - 0 評価