debuggingdomjs和highcharts
好的，所以我试图将一个相当复杂的highcharts渲染脚本从前端移动到通过nodejs进行的服务器端处理
它实际上相当不错。 我有“没有错误”和图表是渲染与数据到SVG。 问题是，当我去查看浏览器中的输出svg的全部搞砸了。 在萤火虫我得到以下“警告”：
Unexpected value NaN parsing y attribute. Unexpected value NaN parsing x attribute. Unexpected value NaN parsing y attribute. Unexpected value NaN parsing x attribute. 我的问题是，我怎么去debugging呢？ 我不知道哪里的NaN值是在highcharts源代码中计算的，并且在控制台中没有得到传统的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
我在控制台中显示的高configurationconfiguration：
{ 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 } ] }
UPDATE这是一个当前以[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 ] ]
更新2问题似乎不是由可能highchartsconfiguration引起的，而是jsdom环境缺less一些关键组件。 我怀疑这是因为当使用较高版本的旧版本时，问题不在那里，但是我的脚本不再是旧版本的结构，而是图表呈现缺less的function。
2.0.5作品
2.2.5不
项目需要在2.2.5
真的，我只是想要一个方法来debugging这个
我不可能轻易地重现这个问题，但是这里有一些您可能想要遵循的线索：
Highchart问题＃1300 ：
修复了由于具有NaN的y属性的标签导出空图表时出现的错误
在Highsoft论坛上有一些讨论。
根据其更新日志中的报告，此问题已在2.3.5得到修复。
在大多数情况下，当收到null数据时，它似乎是一个警告，所以你确定这个数据被返回？ 也许您的图表在您的对象数据返回之前加载？ 我只是在大声思考。
这不是一个解决scheme，只是一个提示。
我认为你需要把这个问题分解成一个小问题，让它工作并小心地增加。 他们你会得到的东西正在打破你的腿。 开始新鲜和redoo直到你发现问题。