HighCharts从数据库获取数据到外部js文件
HighCharts getting data from database to outside js file
我试图在经典ASP中填充SQL Server结果的HighCharts。只要js在asp文件中，代码就可以工作，假设n11=2 ie.
<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();
});
如果我在做同样的事情，但用数字代替'<% = n11 %>'，它也可以。
我做错了什么?
如果我理解正确，您想知道如何从外部JavaScript文件访问您的数据。
这是一个使用需求来实现这一点的plnkr。
此外，您提到当您将<% = n11 %>更改为数字时，也可以。这样做的原因是你在循环中访问N，然后根据i计算N。但是<% = n11 %>不会计算为一个数字，所以除非你把它改为一个数字，否则循环不会工作，然后它会循环那么多次。
在演示中，我将其更改为2，因为这是数据数组的平均长度。
另外，由于您想要创建量规，而它们通常没有多组数据，我认为您可能需要多个量规，所以我修改了highcharts上solidgauge api文档中提供的演示。
相关文章：
- 如何在运行时在angular 2中加载外部js脚本
- 我的外部js文件无法加载
- 像createComment这样的各种自定义变量名在内联javascript中被覆盖，但在外部js中没有.为什么?
- 在使用cq:include包含外部JS之前，如何在JSP中包含全局JS变量
- AJAX在Django的外部JS文件中发布
- jqueryajax调用是复制url，当在模态视图之后在外部js文件中进行调用时
- Javascript:获取“;FORM”;它是在.html到外部.js文件中创建的
- 有没有办法在Node/Webpack中预先准备外部JS工具
- 如何在外部js文件中实现谷歌地图api3
- 在外部JS执行后加载JavaScript
- 外部JS文件可以'不得执行
- Jade-包含来自外部js文件的var
- IE 9 BHO插件.加载外部JS文件时出现错误SCRIPT1014
- 从外部js文件编辑现有的谷歌地图
- Javascript散列导航&外部js文件
- 将HTML文件中的变量与外部JS文件一起使用
- 从Phaser游戏JS向外部JS触发事件
- 从HTML中的外部JS文件调用函数
- 如何执行被用户屏蔽的外部JS文件'adblockers
- 使用node.js时包含外部js
