ajax动态赋值highcharts柱形图

来源：互联网发布：网络教育专科多少费用编辑：程序博客网时间：2024/06/14 15:22
实现的效果为
1.jsp页面
<!-- 引入highcharts官方js --><script src="js/highcharts.js"></script><script>$(function(){//获得hcharts数据并赋值$.ajax({    type:"post",url:rootPath+"/analyze/citySpeed.action",data : {"sendCityName":sendCityName,"receiverCityName":receiverCityName},dataType:"json",cache:false,async:false,success:function(res){console.log(res);  var speed=[];//平均速度  var time=[];//平均用时  var carrierName=[];//横坐标for(var i = 0; i<res.length;i++){    time.push(parseFloat(res[i].useTime));    carrierName.push(res[i].carrierName);    speed.push(parseFloat(res[i].speed));    };    console.log("============speed===========");    console.log(speed);    console.log(carrierName);    console.log(time);       $('#container').highcharts({                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             chart: {              type: 'column'          },          title: {              text: '快递公司平均速度和平均用时'          },          subtitle: {              text: '数据来源: wechat.com'          },          xAxis: {              categories: carrierName,              crosshair: true          },          yAxis: {              min: 0,              title: {                  text: '平均速度(km/h)'              }          },          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}</b></td></tr>',              footerFormat: '</table>',              shared: true,              useHTML: true          },          plotOptions: {              column: {                  pointPadding: 0.2,                  borderWidth: 0              }          },          series: [{              name: '速度(km/h)',              data: speed          },{              name: '用时(h)',              data: time          }/*,         {              name: '时间(h)',              data: [90,80,70,60,50,40,90,80,70,60,50,40,50]          }*/]      });},error:function(){}});})</script>
2.后台返回数据返回map或者list都可以。
阅读全文
0 0