Javascript 调试domjs和highcharts

好的，我正试图通过nodejs将相当复杂的highcharts渲染脚本从前端移动到服务器端处理

实际上进展得相当顺利。我没有“错误”，图表正在将数据渲染到svg中。问题是，当我在浏览器中查看输出的svg时，一切都一团糟。在firebug中，我得到以下“警告”：

我的问题是，我如何调试它？我不知道在highcharts源代码中NaN值是在哪里计算的，并且在控制台中没有得到传统的js错误。本质上相同的代码目前在实际的浏览器环境中运行良好，但在使用nodejs和domjs处理时失败，因此问题可能与此有关

以下是我的节点脚本：

# base libs
{jsdom} = require 'jsdom'
jade    = require 'jade'
fs      = require 'fs'

# chart and settings
Chart               = require './classes/Chart'
Config              = require './config/config.base'
HighchartSettings   = require './config/config.highchart

# curl -d "width=200px&height=100px&device=mobile&resolution=DAILY&type=areaSpline" http://localhost:8000/chart

app.post '/chart', (req, res) ->
    # get post params
    jadeOptions = 
        height  : req.param('height', null)
        width   : req.param('width', null)
    isEnglish   = req.param 'isEnglish', true
    resolution  = req.param 'resolution', null
    chartType   = req.param 'type', null

    device = if req.param('device', 'mobile') is 'mobile' then { mobile : true, tablet : false} else { mobile : false, tablet : true }

    # render dom from jade
    jade.renderFile 'views/chart.jade', jadeOptions, (err, html) ->

        # setup virtual browser
        dom                 = jsdom html
        window              = dom.createWindow()
        {host}              = req.headers
        {document}          = window
        window.console.log  = console.log

        # get localization localization
        window.localization     = Localization isEnglish

        # generate chart settings
        configSettings          = Config device, window.localization
        configSettings          = configSettings[resolution][chartType]
        chartSettings           = HighchartSettings device

        # add jquery
        jsdom.jQueryify window, 'http://'+host+'/jquery.1.7.2.min.js', ->   

            {$} = window

            # add highcharts lib to virtual browser 
            highchartsjs        = document.createElement 'script'
            highchartsjs.type   = 'text/javascript'
            highchartsjs.src    = 'http://'+host+'/highcharts.custom.js'
            highchartsjs.onload = -> 
                {Highcharts} = window

                # don't mess with me, highcharts will cut you!
                Highcharts.setOptions
                    global :
                        useUTC : true

                chartDailyJSONDummy = JSON.parse 'there is real json here, I have removed it for the sake of SO'

                try 
                    chart = new Chart configSettings, chartSettings, chartDailyJSONDummy, Highcharts, ->
                        output = $('#chartWrapper').html()
                        res.setHeader "Content-Type", "text/html"
                        res.write output
                        res.end()
                        console.log 'Chart sent \n'
                catch err 
                    console.log err
                    res.send 'error, see log \n'

            document.body.appendChild highchartsjs  

控制台中显示的My highcharts配置：

{ chart: 
   { renderTo: 'chartContainer',
     backgroundColor: 'none',
     events: { load: [Function] },
     animation: false,
     renderer: 'SVG' },
  title: 
   { text: 'Today vs Yesterday',
     style: { color: 'white', fontSize: '17px', lineHeight: '22px' },
     margin: 18,
     y: 18 },
  subtitle: { text: null },
  xAxis: 
   { type: 'datetime',
     labels: { step: 12, formatter: [Function], style: [Object], y: 20 },
     tickInterval: 3600000,
     tickLength: 6,
     tickWidth: 2,
     startOnTick: true,
     endOnTick: true,
     maxPadding: 0 },
  yAxis: 
   [ { title: [Object], labels: [Object] },
     { title: [Object], labels: [Object], linkedTo: 0, opposite: true } ],
  legend: { enabled: false },
  credits: { enabled: false },
  tooltip: { enabled: false },
  plotOptions: 
   { areaspline: 
      { color: '#19b6f4',
        marker: [Object],
        enableMouseTracking: false },
     spline: 
      { color: '#d01b7c',
        marker: [Object],
        enableMouseTracking: false } },
  series: 
   [ { type: 'areaspline', data: [Object], animation: false },
     { type: 'spline', data: [Object], animation: false } ] }   

---

更新以下是当前出现在

系列

中作为

[Object]

[ [ 1363562100000, 0.358 ],
  [ 1363563000000, 0.498 ],
  [ 1363563900000, 0.241 ],
  [ 1363564800000, 0.211 ],
  [ 1363565700000, 0.426 ],
  [ 1363566600000, 0.58 ],
  [ 1363567500000, 0.195 ],
  [ 1363568400000, 0.217 ],
  [ 1363569300000, 0.185 ],
  [ 1363570200000, 0.19 ],
  [ 1363571100000, 0.223 ],
  [ 1363572000000, 0.18 ],
  [ 1363572900000, 0.164 ],
  [ 1363573800000, 0.188 ],
  [ 1363574700000, 0.16 ],
  [ 1363575600000, 0.166 ],
  [ 1363576500000, 0.188 ],
  [ 1363577400000, 0.154 ],
  [ 1363578300000, 0.162 ],
  [ 1363579200000, 0.1715 ],
  [ 1363580100000, 0.1715 ],
  [ 1363581000000, 0.173 ],
  [ 1363581900000, 0.189 ],
  [ 1363582800000, 0.151 ],
  [ 1363583700000, 0.179 ],
  [ 1363584600000, 0.288 ],
  [ 1363585500000, 0.496 ],
  [ 1363586400000, 0.175 ],
  [ 1363587300000, 0.2 ],
  [ 1363588200000, 0.185 ],
  [ 1363589100000, 0.439 ],
  [ 1363590000000, 1.19 ],
  [ 1363590900000, 0.495 ],
  [ 1363591800000, 0.294 ],
  [ 1363592700000, 0.286 ],
  [ 1363593600000, 0.28 ],
  [ 1363594500000, 0.845 ],
  [ 1363595400000, 2.055 ],
  [ 1363596300000, 2.03 ],
  [ 1363597200000, 1.611 ],
  [ 1363598100000, 1.936 ],
  [ 1363599000000, 1.499 ],
  [ 1363599900000, 1.876 ],
  [ 1363600800000, 1.699 ],
  [ 1363601700000, 1.667 ],
  [ 1363602600000, 1.862 ],
  [ 1363603500000, 1.496 ],
  [ 1363604400000, 2.312 ],
  [ 1363605300000, 2.056 ],
  [ 1363606200000, 0.878 ],
  [ 1363607100000, 1.339 ],
  [ 1363608000000, 0.69 ],
  [ 1363608900000, 1.259 ],
  [ 1363609800000, 0.884 ] ]

---

UPDATE 2问题似乎不是由highcharts配置引起的，而是

jsdom

环境缺少一些关键组件。我怀疑这是因为当使用highcharts的旧版本时，问题并不存在，但我的脚本的结构也不适合旧版本，并且图表呈现时缺少功能

2.0.5工程

2.2.5不

项目需要在2.2.5中列出

---

实际上，我只想找到一种调试此问题的方法

我不可能轻松重现此问题，但以下是您可能希望遵循的一些线索：

海图问题：

修复了由于y属性为NaN的标签导致导出空图表时出现的错误

网上有一些关于它的讨论

该问题已在

2.3.5

中修复，如其报告所述

---

在大多数情况下，当接收到

null

数据时，这似乎是一个警告，因此您确定返回了此数据吗？可能是在返回对象数据之前加载了图表？我只是想大声说出来

这不是一个解决方案，只是一个提示

---

我认为你需要把这个问题分解成一个更小的问题，让它发挥作用，并小心地增加它。他们会让你的腿受伤的。重新开始并重做，直到发现问题。

是否尝试区分生成的SVG（在浏览器上生成的SVG和在服务器上生成的SVG）。这可能会给出一个关于在哪里查找错误的提示。我知道SVG的哪个部分包含NaN，我只是不知道为什么或如何进行测试。您能展示一下

数据：[Object]

的示例吗？它包含什么？看起来您试图使用一些字符串而不是数字作为数据，因此Highcharts无法解析值。@PawełFus没问题！问题已更新。我试图在我的机器上复制此问题，但我没有“图表和设置”部分所需的文件。如果我能看看这个工作应用程序，那就容易多了。是的，我肯定。图表不是空的。只需降低highcharts的级别，它就会显示出来。此外，所有的测试都是硬编码的，包括数据。你能用一个yAxis对象而不是数组来尝试你的图表吗？我看到有人在yAxis上使用数组时遇到问题。只是检查一下这是否导致了您的问题。这不是问题，因为问题不是我的highcharts配置。相同的代码在浏览器中运行良好，因此在我的highcharts设置中没有错误。这是highcharts在jsdom中缺少的东西。

[ [ 1363562100000, 0.358 ],
  [ 1363563000000, 0.498 ],
  [ 1363563900000, 0.241 ],
  [ 1363564800000, 0.211 ],
  [ 1363565700000, 0.426 ],
  [ 1363566600000, 0.58 ],
  [ 1363567500000, 0.195 ],
  [ 1363568400000, 0.217 ],
  [ 1363569300000, 0.185 ],
  [ 1363570200000, 0.19 ],
  [ 1363571100000, 0.223 ],
  [ 1363572000000, 0.18 ],
  [ 1363572900000, 0.164 ],
  [ 1363573800000, 0.188 ],
  [ 1363574700000, 0.16 ],
  [ 1363575600000, 0.166 ],
  [ 1363576500000, 0.188 ],
  [ 1363577400000, 0.154 ],
  [ 1363578300000, 0.162 ],
  [ 1363579200000, 0.1715 ],
  [ 1363580100000, 0.1715 ],
  [ 1363581000000, 0.173 ],
  [ 1363581900000, 0.189 ],
  [ 1363582800000, 0.151 ],
  [ 1363583700000, 0.179 ],
  [ 1363584600000, 0.288 ],
  [ 1363585500000, 0.496 ],
  [ 1363586400000, 0.175 ],
  [ 1363587300000, 0.2 ],
  [ 1363588200000, 0.185 ],
  [ 1363589100000, 0.439 ],
  [ 1363590000000, 1.19 ],
  [ 1363590900000, 0.495 ],
  [ 1363591800000, 0.294 ],
  [ 1363592700000, 0.286 ],
  [ 1363593600000, 0.28 ],
  [ 1363594500000, 0.845 ],
  [ 1363595400000, 2.055 ],
  [ 1363596300000, 2.03 ],
  [ 1363597200000, 1.611 ],
  [ 1363598100000, 1.936 ],
  [ 1363599000000, 1.499 ],
  [ 1363599900000, 1.876 ],
  [ 1363600800000, 1.699 ],
  [ 1363601700000, 1.667 ],
  [ 1363602600000, 1.862 ],
  [ 1363603500000, 1.496 ],
  [ 1363604400000, 2.312 ],
  [ 1363605300000, 2.056 ],
  [ 1363606200000, 0.878 ],
  [ 1363607100000, 1.339 ],
  [ 1363608000000, 0.69 ],
  [ 1363608900000, 1.259 ],
  [ 1363609800000, 0.884 ] ]