highchars,echars的学习心得
一.饼图（pie）
<script type="text/javascript">
ajaxData = [];
$.ajax({
type: "POST",
url: "pie.do",
async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置
success: function(result) {
var dataObj=eval("("+result+")");
for(var i=0;i<dataObj.length;i++){
ajaxData.push([dataObj[i].name,dataObj[i].value,dataObj[i].id]);
}
}
}, false); //false表示“遮罩”，前台不显示“请稍后”进度提示
$(function () {
Highcharts.setOptions({
lang: {
printChart:"打印图表",
downloadJPEG: "下载JPEG 图片" ,
downloadPDF: "下载PDF文档" ,
downloadPNG: "下载PNG 图片" ,
downloadSVG: "下载SVG 矢量图" ,
exportButtonTitle: "导出图片"
}
});
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '各类资源教程汇总统计'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %>'
}
}
},
series: [{
type: 'pie',
name: '',
data: ajaxData,
events: {
click: function(e) {
$("#armsName").val(e.point.name);
document.submitForm.action="tutorialDetail.do";
//操作标示
$("#operate").val("create");
document.submitForm.submit();
}
}
}]
});
});
</script>
<div id="container" class="w100pre close_float" style="height:600px;width: 400px;"></div>
二.条形图（bar）
<script type="text/javascript">
xajaxData = [];
yajaxData = [];
$.ajax({
type: "POST",
url: "Detail.do",
data:{"armsName": $("#armsName").val()},
async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置
success: function(result) {
var dataObj=eval("("+result+")");
for(var i=0;i<dataObj.length;i++){
xajaxData.push(dataObj[i].armName);
yajaxData.push(dataObj[i].allotmentNum)
}
}
}, false); //false表示“遮罩”，前台不显示“请稍后”进度提示
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: $("#armsName").val()+'历年发布情况统计'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: xajaxData,
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: '教程数量',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: '篇'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name:$("#armsName").val(),
data: yajaxData
}]
});
});
function changeDetail(id){
var series=new Array();
var chartData=new Array();
var xData=new Array();
var dateHtml="";
$.ajax({
type: "POST",
url: "changeDetail.do",
data:{"id": id},
async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置
success: function(result) {
var dataObj=eval("("+result+")");
if(null!=dataObj&&dataObj.length>0){
for(var i=0;i<dataObj.length;i++){
xData.push(dataObj[i].armName);
chartData.push(dataObj[i].allotmentNum)
}
var selectIndex = document.getElementById("armType").selectedIndex;//获得是第几个被选中了
var selectText = document.getElementById("armType").options[selectIndex].text //获得被选中的项目的文本
series.push(new SeriesObj(selectText,chartData));
transverseBarChart('container',selectText+'历年发布情况统计','',xData,'','篇',series);
}else{
$("#container").html("<h2 style='text-align:center;'>无数据展示!</h2>");
}
}
}, false); //false表示“遮罩”，前台不显示“请稍后”进度提示
}
function SeriesObj(name,data){
this.name=name;
this.data=data;
}
</script>
<div id="container" class="w100pre close_float" style="height:600px;width: 600px" ></div>
三.transverseBarChart动态值封装（写在tools.js中即可）
/**
* 横向 柱状图
*/
function transverseBarChart(divId,titleData,subtitleData,xAxisData,yAxisData,tooltipValueSuffix,seriesData){
// 判断是否字符串
$('#'+divId).highcharts({
chart: {
type: 'bar'
},
title: {
text: titleData
},
subtitle: {
text: subtitleData
},
xAxis: {
categories: xAxisData
},
yAxis: {
title: {
text: yAxisData
}
},
tooltip: {
shared: true,
valueSuffix: tooltipValueSuffix
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: true
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: seriesData
});
}