使用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代码创建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;

由于'.js'的名称中包含import扩展名，因此您必须使用该名称导出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

我知道这是很老的帖子，但是我设法通过更改define（[“ charts.js”]）上chartjs-plugin-datalabels.min.js版本0.7.0上的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 ...