わかりましたので、かなり複雑なハイチャート レンダリング スクリプトをフロント エンドから nodejs を介してサーバー側の処理に移行しようとしています。
実際にはかなりうまくいきました。「エラーはありません」で、グラフはデータとともに 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.
私の質問は、これをデバッグするにはどうすればよいですか? 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
コンソールに表示される私のハイチャート構成:
{ 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 } ] }
更新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 ] ]
UPDATE 2の問題は、ハイチャートの構成が多いことが原因ではなく、jsdom環境に重要なコンポーネントが欠けていることが原因のようです。ハイチャートの古いコピーを使用する場合、問題はありませんが、スクリプトが古いバージョン用に構造化されておらず、チャートが欠落した機能でレンダリングされるため、これを疑っています。
2.0.5作品
2.2.5 しない
プロジェクトは 2.2.5 である必要があります
本当にこれをデバッグする方法が欲しいだけです