不多说,直接上代码:
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'
}
}
}]
});
}