highchars项目中的实战,与ajax结合接收后台传过来的数据

不多说,直接上代码:

ajax部分:

$.ajax({        
		type:'post',        
		url:path+'/terminal4gController/selectTerminal4g.do',    
		dataType:'json',  
		async: false,
		data: datas,
		success:function(result){
			myStore.removeAll();
			dataSource = result.multipleAnalyseList;
			for (var i = 0;i<dataSource.length;i++){
				seriesData[i] = new Array(dataSource[i].app_name, dataSource[i].consumptionFlow_size);
			}
		}    
	});

highchars图像展示部分:

function showView(viewType){
	var char = new Highcharts.Chart({
		//HighCharts中chart属性配置  
		chart: {  
            renderTo: 'information_date',//div 标签  
            type: viewType,//图表类型  
              
            /******************以下chart配置可选******************/  
            backgroundColor:"#FFFFFF",//图表背景色  
            borderWidth:5,//图表边框宽度  
            borderRadius:15,//图表边框圆角角度  
            plotBackgroundColor:"#FFFFFF",//主图表区背景颜色  
            plotBorderColor:'red',//主图表边框颜色  
            plotBorderWidth:2,//主图表边框宽度  
            shadow:true,//是否设置阴影  
            zoomType:'xy'//拖动鼠标放大图表的方向  
          },
          title: {
              text: '指标报表'
          },
          subtitle: {
//              text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
        	  text: '西安海润'
          },
          xAxis: {
              type: 'category',
              labels: {
                  rotation: -45,
                  style: {
                      fontSize: '13px',
                      fontFamily: 'Verdana, sans-serif'
                  }
              }
          },
          yAxis: {
              min: 0,
              title: {
                  text: '流量 (KB)'
              }
          },
          legend: {
              enabled: false
          },
          tooltip: {
              pointFormat: 'Population in 2015: <b>{point.y:.1f} KB</b>'
          },
          series: [{
              name: 'Population',
              data: seriesData,
              dataLabels: {
                  enabled: true,
                  rotation: -90,
                  color: '#FFFFFF',
                  align: 'right',
//                  format: '{point.y:.1f}', // one decimal
                  y: 10, // 10 pixels down from the top
                  style: {
                      fontSize: '13px',
                      fontFamily: 'Verdana, sans-serif'
                  }
              }
          }]
	});
}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值