jquery - 使用 require.js 加载 Highcharts

Question

我一直在尝试将 highcharts 作为 require 模块加载，但收效甚微。我想知道是否有人设法让这个工作，或者他们是否有任何指示让我走上正确的轨道？

谢谢

Answer 1

使用 require.js 2.1.0+ 不需要插件。您可以包含带有shim的 Highcharts ：

require.config({
  paths: {
    require: "libs/require",
    jquery: "libs/jquery",
    highcharts: "libs/highcharts"
  },
  shim: {
    highcharts: {
      exports: "Highcharts",
      deps: ["jquery"]
    }
  } // end Shim Configuration
});

Answer 2

我刚刚让它按如下方式工作：

1. 在顶部添加：

   define(['jquery'], function (jQuery) {
   

2. 在最后添加：

   return window.Highcharts; });

这假设您已经定义了 jquery，例如

require.config({
    paths: {
        'jquery': 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min'
     }
});

对于大多数第三方库，您可以遵循这种通用方法。例如，我为 jquery.tmpl.js 和 knockout.js 执行此操作。

Answer 3

使用最近的use.js 插件绝对是要走的路。按照我之前的回答中的建议编辑第三方库对于可维护性来说是一种痛苦。

Answer 4

一个最近使用模块的 Highcharts 方法的最小示例（JSFiddle 示例）：

require.config({
    paths: {
        highcharts: "https://code.highcharts.com/highcharts",
        highcharts_exporting: "https://code.highcharts.com/modules/exporting"
    }
});

require(['highcharts', 'highcharts_exporting'], function(Highcharts, exporting) {
    exporting(Highcharts); // We need to initialize module files and pass in Highcharts

    Highcharts.chart('container', {
        series: [{
            data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
        }, {
            data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
        }]
    });
});

有关使用说明，请参阅此 Highcharts 文档。