使用 RequireJS 的 chartjs-plugin-streaming 和依赖项的 require.config 的语法是什么？

Question

我正在尝试为 Javascript 库即时设置 RequireJS require.config()。我将此配置用于 Moment.js, Chart.js and 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 代码创建一个 simple line chart：

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'，如您在 index.js in the GitHub source 及以下内容中所见。

'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

我知道这是旧的 post，但我只是设法通过更改 chartjs-plugin-datalabels.min.js 上的定义参考来解决这个问题，版本 0.7.0 来自 define(["charts.js"]) 定义(["path of my file"])

来自（前两行）：

!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 ...

使用 RequireJS 的 chartjs-plugin-streaming 和依赖项的 require.config 的语法是什么？

What is the syntax for require.config for chartjs-plugin-streaming and dependencies using RequireJS?

javascript

requirejs

chart.js

rcloud