当前位置：文江博客话题详情

使用 require.js 加载 Highcharts

发布于 2024-12-16 12:52:03 字数 107 浏览 0 评论 0原文

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

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

初相遇 2024-12-23 12:52:03

使用 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
});

With require.js 2.1.0+ a plugin is not necessary. You can include Highcharts with a shim:

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

回复收藏 0 原文

北城孤痞 2024-12-23 12:52:03

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

将其添加到顶部：
```
define(['jquery'], 函数 (jQuery) {
```
在最后添加此内容：
返回窗口.Highcharts; });

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

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

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

I just got it to work as follows:

Add this at the top:
```
define(['jquery'], function (jQuery) {
```
Add this at the very end:
return window.Highcharts; });

This assumes you have jquery already defined, eg

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

You can follow this general approach for most third party libraries. For example, I did this for jquery.tmpl.js and knockout.js.

回复收藏 0 原文

倾城泪 2024-12-23 12:52:03

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

回复收藏 0 原文

晒暮凉 2024-12-23 12:52:03

最近使用模块的 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 文档了解使用说明。

A minimal example of a recent approach for Highcharts with a module (JSFiddle example):

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]
        }]
    });
});

See this Highcharts documentation for a usage description.

回复收藏 0 原文

~没有更多了~