[英]Node.js, express, jade, highcharts and 2D array
免責聲明,我是javascript / node.js / express / jade / highcharts等新手......
對我的問題
我有一個模板,接收我在路由器代碼中預處理的幾個參數。 這些參數被分為1個對象,並代表元數據和系列數據的高圖表圖形。
當我試圖將2D數組傳遞給代表我的數據系列的jade模板時,我遇到了問題,但在chrome dev工具中它看起來像一個普通的數組。 我的Highcharts代碼基於: Highcharts列圖
這是我的代碼:
delivered.js
var callback = function process_results(result){
var res = new Object()
res.title = "Delivery Count"
res.yAxisTitle = 'Delivered'
res.seriesName = "Delivered per month"
res.seriesData = []
for (var i = 0; i < result.rows.length; i++) {
//process the query results
row = result.rows[i]
date = "\'" + row.month_delivered + '/' + row.year_delivered + "\'"
count = row.count
res.seriesData.push([date,count])
};
console.log(res)
response.render('column-graph', res)
}
列graph.jade
html
head
link(rel='stylesheet', href='/stylesheets/style.css')
script(type='text/javascript', src="http://code.jquery.com/jquery-1.9.1.min.js")
script(type='text/javascript', src="http://code.highcharts.com/highcharts.js")
script(type='text/javascript', src="http://code.highcharts.com/modules/exporting.js")
title Delivered Leads
body
div#container(style="min-width: 500px; height: 500px; margin: 0 auto")
script.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: "#{title}"
},
subtitle: {
text: 'Source: Internal DB'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: "#{yAxisTitle}"
}
},
legend: {
enabled: false
},
series: [{
name: '#{seriesName}',
data: [#{seriesData}],
dataGrouping: {
enabled: true
},
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
}
}]
});
});
#{seriesData}參數是res.seriesData,它應該是一個2D數組。 在deliver.js中,我有一個console.log(res),顯示:
{ title: 'Delivery Count',
yAxisTitle: 'Delivered',
seriesName: 'Delivered per month',
seriesData:
[ [ '\'7/2014\'', '3000' ],
[ '\'6/2014\'', '5163' ],
[ '\'5/2014\'', '23882' ],
[ '\'4/2014\'', '26471' ],
[ '\'3/2014\'', '82172' ],
[ '\'2/2014\'', '31283' ],
[ '\'1/2014\'', '637400' ],
[ '\'12/2013\'', '86420' ],
[ '\'11/2013\'', '119150' ],
[ '\'10/2013\'', '49093' ] ] }
但是當我在瀏覽器中查看它時,我得到了這個:
series: [{
name: 'Delivered per month',
data: ['7/2014',3000,'6/2014',5163,'5/2014',23882,'4/2014',26471,'3/2014',82172,'2/2014',31283,'1/2014',637400,'12/2013',86420,'11/2013',119150,'10/2013',49093],
dataGrouping: {
enabled: true
},
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
}
}]
});
對不起,很長的問題,並提前感謝!!
最后,我做了別的事情。 而不是在deliver.js中預處理數組,
我將數組原樣傳遞給jade模板並執行以下操作:
html
head
link(rel='stylesheet', href='/stylesheets/style.css')
script(type='text/javascript', src="http://code.jquery.com/jquery-1.9.1.min.js")
script(type='text/javascript', src="http://code.highcharts.com/highcharts.js")
script(type='text/javascript', src="http://code.highcharts.com/modules/exporting.js")
title Delivered Leads
body
div#container(style="min-width: 500px; height: 500px; margin: 0 auto")
script.
var arrToMultiArr = function(arr){
var result = new Array()
for (var i=0; i < arr.length; i+=2){
var date = arr[i]
var count = arr[i + 1]
result.push([date, count])
}
return result
};
var mySeries = arrToMultiArr([#{seriesData}])
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: "#{title}"
},
subtitle: {
text: 'Source: Internal DB'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: "#{yAxisTitle}"
}
},
legend: {
enabled: false
},
series: [{
name: '#{seriesName}',
data: mySeries,
dataGrouping: {
enabled: true
},
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
}
}]
});
});
嘗試改變:
data: [#{seriesData}],
至:
data: #{seriesData},
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.