Отладка домашних и высоких диаграмм
Хорошо, поэтому я пытаюсь перенести довольно сложный рендеринг highcharts script из интерфейса на серверную обработку через 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 вычисляется в источнике высоких диаграмм и не получает никаких традиционных js-ошибок в консоли. То, что по существу тот же самый код, в настоящее время отлично работает в реальной среде браузера, но не работает при обработке с nodejs и domjs, поэтому, вероятно, проблема связана с этим.
Вот мой node script:
# 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 } ] }
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 ] ]
ОБНОВЛЕНИЕ 2 Проблема, похоже, не вызвана конфигурацией высокоуровневых диаграмм, а скорее средой jsdom отсутствует какой-либо критический компонент. Я подозреваю это, потому что, когда вы используете более старую копию высокочастотных диаграмм, проблемы там нет, но опять же мой script не структурирован для более старой версии, а диаграмма отображает с отсутствующими функциями.
2.0.5 РАБОТЫ
2.2.5 НЕ
проект должен быть в 2.2.5
ДЕЙСТВИТЕЛЬНО Я ТОЛЬКО ХОТЯТ ПУТЬ, ЧТОБЫ ОТПРАВИТЬ ЭТО
Ответы
Ответ 1
Невозможно легко воспроизвести проблему, но вот несколько примеров, которые вы можете захотеть:
Highchart issue # 1300:
Исправлена ошибка при экспорте пустой диаграммы из-за меток с атрибутом y NaN
Об этом было обсуждено на форуме Highsoft.
Эта проблема была исправлена в 2.3.5, как указано в их changelog.
Кажется, это предупреждение, когда в большинстве случаев принимаются данные null, так что вы уверены, что эти данные будут возвращены? Может быть, ваша диаграмма загружена до того, как будут возвращены данные объекта? Я просто думаю вслух.
Ответ 2
Это не решение, просто подсказка.
Я думаю, что вам нужно разбить эту проблему на меньшую, заставить ее работать и тщательно ее увеличить. Их вы поймете, где все ломается. Начните с обновления и повторите, пока не найдете проблему.
