HighCharts详细折线图,柱状图,饼图.docx

/**
* 折线图
*
* */
function ClientLivSelect(){
var organizationname = $("#organizationname").val();
var year = $("#year option:selected").text();
var issuccess = $("#issuccess option:selected").text();
//alert(year);
var d = new Date();
var vYear = d.getFullYear();
var vMonth = d.getMonth()+1;
if(year == '年份'){

year = vYear;
}

$.ajax({
type:"post",
url : '../LogManager/ClientLivSelect',
dataType : "json",
data :{
Year:year,
OrganizationName:organizationname,
isSuccess:issuccess
},
error : function() {
alert("error");
},
success : function(data) {
// var str = [0,0,0,0,0,0,0,0,0,0,0,0];
// $.each(data, function(c, item) {
// str[item.imonth-1] = item.cou_mon;
// });
if(data == 1){
alert("登录超时，请重新登录");
window.parent.location.href = "../login.jsp";
}
var str = new Array();//存放纵坐标
if(year == vYear){
for (var int = 1; int <= vMonth; int++) {
str.push(0);
}
alert(vMonth);
}else{
str = [0,0,0,0,0,0,0,0,0,0,0,0];
}
var xstr = [];
var xtitle;
var ytitle;
$.each(data, function(c, item) {
str[item.imonth-1] = item.cou_mon;
xstr = item.month;
xtitle = item.xtitle;
ytitle = item.ytitle;
});
drawRzhBIG(str,year);
}
});
}

function drawRzhBIG(str,year) {

alert(str);
new Highcharts.Chart({
chart: {
renderTo: 'container', //图表放置的容器，DIV
defaultSeriesType: 'line', //图表类型line(折线图),
zoomType: 'x' //x轴方向可以缩放
},
credits: {
enabled: false //右下角不显示LOGO
},
title: {
text: '日志异常数据抽取统计图' //图表标题
},
// subtitle: {
// text: '2011年' //副标题
// },
xAxis: { //x轴 json.xDate
categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', //数据取出来的
'11月', '12月'], //x轴标签名称
gridLineWidth: 1, //设置网格宽度为1
lineWidth: 2, //基线宽度
// labels:{y:20} //x轴标签位置：距X轴下方26像素
},
yAxis: { //y轴
title: {text: '数量'}, //标题
lineWidth: 2 //基线宽度
},
tooltip: {
valueSuffix: '°C'
},
plotOptions:{ //设置数据点
line:{
dataLabels:{
enabled:true //在数据点上显示对应的数据值
},
enableMouseTracking: false //取消鼠标滑向触发提示框
}
},
// legend: { //图例
// layout: 'horizontal', //图例显示的样式：水平（horizontal）/垂直（vertical）
// backgroundColor: '#ffc', //图例背景色
// align: 'left', //图例水平对齐方式
// verticalAlign: 'center', //图例垂直对齐方式
// x: 100, //相对X位移
// y: 70, //相对Y位移
// floating: false, //设置可浮动
// shadow: true //设置阴影
// },
exporting: {
enabled: false //设置导出按钮不可用
},
series: [{ //数据列 显示两条线
name: year+"年", //json.rzhMax
data: str //显示值取出来的
}]
});
//});
}

/**
* 柱状图
*
* */
function ClientParSelect(){

var organizationname = $("#organizationname").val();
var year = $("#year option:selected").text();
var issuccess = $("#issuccess option:selected").text();
alert("1111");
var d = new Date();
var vYear = d.getFullYear();
var vMonth = d.getMonth();
if(year == "年份"){
year = vYear;
alert(year);
}
$.ajax({
type:"post",
url:'../LogManager/ClientLivSelect',
dataType: "json",
data:{
Year:year,
OrganizationName:organizationname,
isSuccess:issuccess
},
error:function(){
alert("error");
},
success:function(data){
if(data == 1){
alert("登录超时，请重新登录");
window.parent.location.href = "../login.jsp";
}
var str = new Array();//存放纵坐标
if(year == vYear){
for (var int = 1; int <= vMonth; int++) {
str.push(0);
}
alert(vMonth);
}else{
str = [0,0,0,0,0,0,0,0,0,0,0,0];
}
var xstr = [];
var xtitle;
var ytitle;
$.each(data, function(c, item) {
str[item.imonth-1] = item.cou_mon;
xstr = item.month;
xtitle = item.xtitle;
ytitle = item.ytitle;
});

drawParBIG(str,year,xstr,xtitle,ytitle);
}
});

}

function drawParBIG(str,year,xstr,xtitle,ytitle) {
// $(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: xtitle //title
},
// subtitle: {
// text: 'Source: WorldC' //副title
// },
xAxis: { //x轴
categories: xstr
},
yAxis: { //y轴
// min: 0,
lineWidth: 1 ,
title: {
text: ytitle //y轴 title
}
},

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}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
dataLabels:{
enabled:true, //是否显示数据标签
pointPadding: 0.2,
borderWidth: 0
}
}
},
series: [{
name: year + '年',
data: str
}]
});
// });
}

/**
* 饼图
* */

function ClientPieSelect(){

var organizationname = $("#organizationname").val();
var year = $("#year option:selected").text();
var issuccess = $("#issuccess option:selected").text();
alert("1111");
var d = new Date();
var vYear = d.getFullYear();
var vMonth = d.getMonth()+1;
if(year == "年份"){
year = vYear;
alert(year);
}
$.ajax({
type:"post",
url:'../LogManager/ClientLivSelect',
dataType: "json",
data:{
Year:year,
OrganizationName:organizationname,
isSuccess:issuccess
},
error:function(){
alert("error");
},
success:function(data){
if(data == 1){
alert("登录超时，请重新登录");
window.parent.location.href = "../login.jsp";
}
var str = new Array();//存放纵坐标
if(year == vYear){
for (var int = 1; int <= vMonth; int++) {
str.push(0);
}
alert(vMonth);
}else{
str = [0,0,0,0,0,0,0,0,0,0,0,0];
}
var xstr = [];
var xtitle;
var ytitle;
$.each(data, function(c, item) {
str[item.imonth-1] = item.cou_mon;
xstr = item.month;
xtitle = item.xtitle;
ytitle = item.ytitle;

});
var pieArr = [];
for (var i = 0; i < xstr.length; i++) {
var subArr = [];
subArr.push(xstr[i]);
subArr.push(str[i]);
pieArr.push(subArr);
}
alert(pieArr);
drawPieBIG(year,xtitle,pieArr);
}
});

}

function drawPieBIG(year,xtitle,pieArr) {
//$(function () {

// Make monochrome colors and set them as default for all pies
Highcharts.getOptions().plotOptions.pie.colors = (function () {
var colors = [],base = Highcharts.getOptions().colors[0];
for (var i = 0; i < 10; i++) {
// Start out with a darkened base color (negative brighten), and end
// up with a much brighter color
colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
}
return colors;
}());

// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: xtitle
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: year+'年',
data: pieArr //数组
}]
});
//});
}