使用nodejs的Highchart基本图表

时间:2017-06-22 17:20:12

标签: javascript node.js highcharts

我正在试图在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]
    }]

});

我搜索了这个,显然是因为节点,但我不确定,这是非常不寻常的。

希望你能提供帮助。谢谢。 如果你在,你能帮我通过电子邮件发送这样的图片,我能发送基本邮件,但我想发送图表。 我已经有了一个数组来制作图表。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

这是我第一次回答SO问题,但我设法解决了这个问题&#39; TypeError:无法读取属性&#39; navigator&#39;未定义的&#39;同时从Highcharts网站创建基本图表。我遵循@morganfree说明&#39;基本上,Highcharts是一个浏览器图表库 - 因此它需要DOM才能生成图表。除非您在节点(例如jsdom)中使用某种DOM实现,否则您将无法创建图表。 &#39 ;.请记住,这适用于最基本的图表实现。对于其他类型的图表,您可能需要深入了解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&amp; 2在此链接中 - https://www.highcharts.com/docs/getting-started/your-first-chart

  4. 重新渲染您的html页面,您应该会看到Hghcharts提供的默认图表。 :D希望这有帮助。
  5. PS。阅读node-jsdom文档,了解代码片段的作用。