使用 RequireJS 的 chartjs-plugin-streaming 和依賴項的 require.config 的語法是什么？

Question

我正在嘗試為 Javascript 庫動態設置 RequireJS require.config()。 我將此配置用於Moment.js 、 Chart.js和Chartjs Streaming Plugin ：

require.config({
        paths: {
    'moment': '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min',
    'chart': '//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart',
    'streaming': '//cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.3.0/dist/chartjs-plugin-streaming.min'
        },
        shim: {
           'chart': {
            exports: 'C'
            },
           'streaming': {
                exports: 'C',
                deps: ['moment','chart']
            }
        }
});

我正在嘗試使用以下 Javascript 代碼創建一個簡單的折線圖：

require(['moment', 'chart', 'streaming'], function (moment, C, streaming) {
   var ctx = document.getElementById('myChart').getContext('2d');
   var chrt = new C.Chart(ctx, {
      type: 'line',
      data: { datasets: [{ data: [1,2,3,4,5] },{ data: [-1,0,1,2,3] }] }
    })
})

如果我不包含 chartjs-plugin-streaming.min.js 代碼，此腳本會創建一個簡單的 Chart.js 圖表。

但是，當我嘗試使用上面的 require.config() 添加該腳本時，我在 Chrome 中看到“chart.js”出現 500 錯誤，即使認為 Chart.js 已經加載：

我的問題是，我是否需要正確使用 chartjs-plugin-streaming 及其依賴項？ 還是有其他問題？

Answer 1

chartjs-plugin-streaming正在尋找'chart.js'正如您在 GitHub 源代碼和下面的index.js 中看到的那樣。

'use strict';

import Chart from 'chart.js';
import moment from 'moment';

import realTimeScale from './scales/scale.realtime';
import streamingPlugin from './plugins/plugin.streaming';

realTimeScale(Chart, moment);

var plugin = streamingPlugin(Chart);
Chart.plugins.register(plugin);
export default plugin;

因為它在import的名稱中有'.js'擴展名，所以您必須使用該名稱在require.config導出某些內容。

您需要一個 RequireJS map以便chartjs-plugin-streaming可以找到該文件。 這是固定的require.config 。

 require.config({ paths: { moment: "//cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min", chart: "//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min", streaming: "//cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.3.0/dist/chartjs-plugin-streaming.min" }, shim: { chartjs: { exports: "C" }, streaming: { exports: "C", deps: ["moment", "chart"] } }, map: { streaming: { "chart.js": "chart" } } }); require(["moment", "chart", "streaming"], function(moment, chart) { var ctx = document.getElementById("myChart").getContext('2d'); var chrt = new chart.Chart(ctx, { type: "line", data: { datasets: [{ data: [1, 2, 3, 4, 5] }, { data: [-1, 0, 1, 2, 3] }] } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script> <canvas id="myChart" width="400" height="400"></canvas>

Answer 2

我知道這是舊帖子，但我只是通過將 chartjs-plugin-datalabels.min.js，版本 0.7.0 上的定義引用從 define(["charts.js"]) 更改為 define( [“我的文件路徑”])

來自（前兩行）：

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("chart.js")):"function"==typeof define&&define.amd?define(["charts.js"],e) ...

到：

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("chart.js")):"function"==typeof define&&define.amd?define(["../charts/Chart.min.js"],e ...