Question

<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>

我是前端网络开发人员的新手，但我过去做了很多javascript，但我真的不知道为什么这段代码，我浪费了很多时间这个，我很快就需要这样做。

它根本不会执行，但我看不到语法错误或它的错误（它主要基于SO答案，因为我不知道jQuery），我需要帮助声明和使用jQuery函数，或者如果它的AJAX调用错误

Answer 1

您构建网址的方式是错误的

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和加载图表下载的脚本不起作用

1 个答案: