javascript - 使用nodejs制作Highchart基本图表

Question

我正在尝试在nodejs中制作highcharts图表，我已经通过npm安装了它。 我正在尝试使用基本图表，但它给了我这个错误。

TypeError: Cannot read property 'navigator' of undefined
    at /opt/node/project/node_modules/highcharts/modules/exporting.js:9:325
    at /opt/node/project/node_modules/highcharts/modules/exporting.js:27:171
    at Object.<anonymous> (/opt/node/project/actions/mailrequest.js:3:40)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:390:7)

这是我的代码，这是在js中:

  var Highcharts = require('highcharts');
require('highcharts/modules/exporting')(Highcharts);


var chart = Highcharts.chart('container', {

    series: [{
        name: 'Installation',
        data: htmldata
    }, {
        name: 'Manufacturing',
        data: [htmldata]
    }, {
        name: 'Sales & Distribution',
        data: [htmldata]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [htmldata]
    }]

});

我搜索了这个，显然是因为 Node ，但我不确定，这很不寻常。

希望能帮到你。谢谢。 如果您在旁边，您能帮我通过电子邮件发送此类图形吗？我可以发送基本邮件，但我想发送图表。 我已经有一个数组来制作图表。任何帮助将不胜感激。

Answer 1

这是我第一次回答这样的问题，但我在从 Highcharts 网站创建基本图表时设法解决了“TypeError:无法读取未定义的属性‘navigator’”的问题。我遵循 @morganfree 的说明“基本上，Highcharts 是一个浏览器图表库 - 因此它需要 DOM 才能生成图表。除非您在 Node 中使用某种 DOM 实现(例如 jsdom)，否则您将无法创建图表。 '。请记住，这适用于最基本的图表实现。对于其他类型的图表，您可能需要更深入地研究 jsdom。

解决步骤:

1. 下载 npm node-jsdom 包 - https://www.npmjs.com/package/node-jsdom

2. 将此代码粘贴到您运行以启动程序的主文件中。

   const jsdom = require("node-jsdom");
   
   jsdom.env(
     "https://code.highcharts.com/highcharts.js",
     ["http://code.jquery.com/jquery.js"],
     function (errors, window) {
       console.log("there have been", window.$("a").length, "nodejs 
     releases!");
   }
   );
   

3. 按照此链接中的步骤 1 和 2 进行操作 - https://www.highcharts.com/docs/getting-started/your-first-chart

4. 重新渲染您的 html 页面，您应该会看到 Hghcharts 提供的默认图表。 :D 希望这有帮助。

PS。阅读 node-jsdom 文档以了解代码片段的作用。