javascript - 调试 domjs 和 highcharts-6ren

javascript - 调试 domjs 和 highcharts

转载作者：IT老高更新时间：2023-10-28 23:13:01

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

它实际上进行得相当好。我没有“错误”，并且图表正在将数据渲染为 svg。问题是当我在浏览器中查看输出的 svg 时，一切都搞砸了。在 Firebug 中，我收到以下“警告”:

Unexpected value NaN parsing y attribute.
Unexpected value NaN parsing x attribute.
Unexpected value NaN parsing y attribute.
Unexpected value NaN parsing x attribute.

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

这是我的 Node 脚本:

# 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

控制台中显示的我的 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 } ] }

UPDATE 以下是当前在 series 中显示为 [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 ] ]