<script>
var highchartsOptions = {
chart: {
backgroundColor: 'rgba(255, 255, 255, 0.1)',
type: 'column'
},
title: {
text: ''
},
exporting: {
buttons:{
contextButton:{
enabled: false
}
}
},
credits: {
enabled: false
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
colors: ['#2b908f', '#f7a35c', '#434348', '#8085e9', '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1']
};
function showTopPickrate(data) {
$('#containerTopPickrate').highcharts({
chart: highchartsOptions.chart,
title: highchartsOptions.title,
credits: highchartsOptions.credits,
exporting: highchartsOptions.exporting,
tooltip: highchartsOptions.tooltip,
plotOptions: highchartsOptions.plotOptions,
colors: highchartsOptions.colors,
xAxis: {
categories: [
data[0]._id.championId,
data[2]._id.championId,
data[3]._id.championId,
data[4]._id.championId,
data[5]._id.championId,
data[6]._id.championId,
data[7]._id.championId,
data[8]._id.championId,
data[9]._id.championId,
data[10]._id.championId
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Percentage'
}
},
series: [{
name: 'Popularity',
data: [ floor(data[0].value.pickRate*100) ,
floor(data[1].value.pickRate*100),
floor(data[2].value.pickRate*100),
floor(data[3].value.pickRate*100),
floor(data[4].value.pickRate*100),
floor(data[5].value.pickRate*100),
floor(data[6].value.pickRate*100),
floor(data[7].value.pickRate*100),
floor(data[8].value.pickRate*100),
floor(data[9].value.pickRate*100)]
}, {
name: 'Win Rate',
data: [ floor(data[0].value.winRate*100) ,
floor(data[1].value.winRate*100),
floor(data[2].value.winRate*100),
floor(data[3].value.winRate*100),
floor(data[4].value.winRate*100),
floor(data[5].value.winRate*100),
floor(data[6].value.winRate*100),
floor(data[7].value.winRate*100),
floor(data[8].value.winRate*100),
floor(data[9].value.winRate*100)]
}]
});
}
function loadTopPickrate(day){
$.ajax({
url: "http://localhost:2000/mapReduce/getMapReduceResultsTopPickRate?day="day,
type: "get",
dataType: 'json',
success: function(data){
alert("got it"); // debug
showTopPickrate(data);
},
error:function(){
alert("error");
}
});
}
$(function() {
loadTopPickrate("all");
});
</script>
我是前端 Web 开发新手,但我过去做过很多 JavaScript,但我真的不知道为什么这段代码,我在这上面浪费了很多时间,我需要完成这个很快。
它根本不会执行,但我看不到语法错误或它是如何错误的(它主要基于SO答案,因为我不知道jQuery),我需要帮助声明和使用jQuery函数,或者如果它是AJAX 调用错误
最佳答案
您构建网址的方式错误
url: "http://localhost:2000/mapReduce/getMapReduceResultsTopPickRate?day="day,
需要
url: "http://localhost:2000/mapReduce/getMapReduceResultsTopPickRate?day=" + day,
最好使用数据
$.ajax({
url: "http://localhost:2000/mapReduce/getMapReduceResultsTopPickRate",
data : {
day : day
},
type: "get",
dataType: 'json',
success: function(data){
alert("got it"); // debug
showTopPickrate(data);
},
error:function(){
alert("error");
}
});
关于JavaScript:通过 AJAX 下载和加载图表的脚本不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29675502/