我正在尝试使用Classic ASP中的SQL Server填充HighCharts结果。 只要js在asp文件中代码正常工作，假设n11 = 2即
<script>
$(function () {
var N = '<% = n11 %>'
var brcolor = []
var tl = []
var frcolor = []
var rd = []
var inrd = []
var otrd = []
var gg = []
var zeva = []
var ovi = []
brcolor[1] = '#666666'
brcolor[2] = '#666666'
tl[1] = 'name1'
tl[2] = 'name2'
frcolor[1] = '#666666'
frcolor[2] = '#666666'
rd[1] = '109%'
rd[2] = '96%'
inrd[1] = '112%'
inrd[2] = '106%'
otrd[1] = '99%'
otrd[2] = '93%'
gg[1] = 80
gg[2] = 65
zeva[1] = '#eeeeee'
zeva[2] = '#eeeeee'
zeva[3] = '#ffffff'
ovi[1] = 1
ovi[2] = 1
ovi[3] = 0
if (!Highcharts.theme) {
Highcharts.setOptions({
chart: {
backgroundColor: 'rgba(255,255,255,0.002)'
},
colors: ['#666666', '#666666', '#666666', '#666666', '#666666', '#666666', '#666666'],
tooltip: {
style: {
color: '#a0a0a0'
}
}
});
}
Highcharts.chart('11', {
chart: {
type: 'solidgauge',
margin: [0, 0, 0, 0]
},
title: {
text: '',
style: {
fontSize: '12px'
}
},
tooltip: {
borderWidth: 1,
backgroundColor: 'white',
shadow: false,
useHTML: true,
style: {
fontSize: '14px',
fontFamily: 'arial',
direction: 'rtl'
},
pointFormat: '<div style="width: 120px; white-space:normal; text-align: right">{series.name}</div><div style="text-align: center"><span style="font-size:1.3em; font-weight: bold; color: {point.color}; ">{point.y}%</span></div>'
// positioner: function (labelWidth, labelHeight) {
// return {
// x: 120 - labelWidth / 2,
// y: 20
// };
// }
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{
outerRadius: '112%',
innerRadius: '106%',
backgroundColor: zeva[1],
borderWidth: ovi[1]
}, {
outerRadius: '99%',
innerRadius: '93%',
backgroundColor: zeva[2],
borderWidth: ovi[2]
}, {
outerRadius: '86%',
innerRadius: '80%',
backgroundColor: zeva[3],
borderWidth: ovi[3]
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
credits: {
enabled: false
},
plotOptions: {
solidgauge: {
borderWidth: '6px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: []
});
var newSeries = []
for (var i = 1; i <= N; i++) {
var newData = [];
var seria = {};
var datai = {};
datai['color'] = frcolor[i];
datai['radius'] = rd[i];
datai['innerRadius'] = rd[i];
datai['y'] = gg[i];
seria['borderColor'] = brcolor[i];
seria['name'] = tl[i];
seria['data'] = [datai];
newSeries.push(seria);
}
var chart = $('#11').highcharts();
$.each(newSeries, function (i, ns) {
chart.addSeries(ns, false);
});
chart.redraw();
});
</script>
但是当我有一个单独的js文件（11.js）并将其包含在文件头中时它不起作用。
头条
<script type=text/javascript src=charts/11.js></script>
js是：
$(function () {
var N = '<% = n11 %>'
var brcolor = []
var tl = []
var frcolor = []
var rd = []
var inrd = []
var otrd = []
var gg = []
var zeva = []
var ovi = []
brcolor[1] = '#666666'
brcolor[2] = '#666666'
tl[1] = 'name1'
tl[2] = 'name2'
frcolor[1] = '#666666'
frcolor[2] = '#666666'
rd[1] = '109%'
rd[2] = '96%'
inrd[1] = '112%'
inrd[2] = '106%'
otrd[1] = '99%'
otrd[2] = '93%'
gg[1] = 80
gg[2] = 65
zeva[1] = '#eeeeee'
zeva[2] = '#eeeeee'
zeva[3] = '#ffffff'
ovi[1] = 1
ovi[2] = 1
ovi[3] = 0
if (!Highcharts.theme) {
Highcharts.setOptions({
chart: {
backgroundColor: 'rgba(255,255,255,0.002)'
},
colors: ['#666666', '#666666', '#666666', '#666666', '#666666', '#666666', '#666666'],
tooltip: {
style: {
color: '#a0a0a0'
}
}
});
}
Highcharts.chart('11', {
chart: {
type: 'solidgauge',
margin: [0, 0, 0, 0]
},
title: {
text: '',
style: {
fontSize: '12px'
}
},
tooltip: {
borderWidth: 1,
backgroundColor: 'white',
shadow: false,
useHTML: true,
style: {
fontSize: '14px',
fontFamily: 'arial',
direction: 'rtl'
},
pointFormat: '<div style="width: 120px; white-space:normal; text-align: right">{series.name}</div><div style="text-align: center"><span style="font-size:1.3em; font-weight: bold; color: {point.color}; ">{point.y}%</span></div>'
// positioner: function (labelWidth, labelHeight) {
// return {
// x: 120 - labelWidth / 2,
// y: 20
// };
// }
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{
outerRadius: '112%',
innerRadius: '106%',
backgroundColor: zeva[1],
borderWidth: ovi[1]
}, {
outerRadius: '99%',
innerRadius: '93%',
backgroundColor: zeva[2],
borderWidth: ovi[2]
}, {
outerRadius: '86%',
innerRadius: '80%',
backgroundColor: zeva[3],
borderWidth: ovi[3]
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
credits: {
enabled: false
},
plotOptions: {
solidgauge: {
borderWidth: '6px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: []
});
var newSeries = []
for (var i = 1; i <= N; i++) {
var newData = [];
var seria = {};
var datai = {};
datai['color'] = frcolor[i];
datai['radius'] = rd[i];
datai['innerRadius'] = rd[i];
datai['y'] = gg[i];
seria['borderColor'] = brcolor[i];
seria['name'] = tl[i];
seria['data'] = [datai];
newSeries.push(seria);
}
var chart = $('#11').highcharts();
$.each(newSeries, function (i, ns) {
chart.addSeries(ns, false);
});
chart.redraw();
}）;
如果我这样做但是输入一个数字而不是'＆lt;％= n11％＆gt;'它也可以。
我做错了什么？
答案 0 :(得分：0)
如果我理解正确，您想知道如何从外部JavaScript文件访问您的数据。
Here is a plnkr using requirejs to achieve this.
此外，您提到当您更改＆lt;％= n11％＆gt;时对于一个数字然后它也没关系。这样做的原因是你在一个循环中访问N，然后在i中对N进行评估。但是＆lt;％= n11％＆gt;不计算数字，所以循环不起作用，除非你把它改成一个数字，然后它会循环多次。
在演示中我将其更改为2，因为这是数据阵列的平均长度。
另外，由于你想要创建仪表，而且它们通常没有多组数据，我想也许你想要多个仪表，所以我修改了solidgauge api documentation on highcharts中提供的演示。