当前位置:文档之家› HighCharts详细折线图,柱状图,饼图

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

/***折线图***/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', //图表放置的容器,DIVdefaultSeriesType: '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, //设置网格宽度为1lineWidth: 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.rzhMaxdata: 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: ' //副title// },xAxis: { //x轴categories: xstr},yAxis: { //y轴// min: 0,lineWidth: 1 ,title: {text: ytitle //y轴 title}},tooltip: {headerFormat: '<spanstyle="font-size:10px">{point.key}</span><table>',pointFormat: '<tr><tdstyle="color:{series.color};padding:0">{}: </td>' + //'<tdstyle="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 colorcolors.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: '{}:<b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,format: '<b>{}</b>:{point.percentage:.1f} %',style: {color: (Highcharts.theme &&Highcharts.theme.contrastTextColor) || 'black'}}}},series: [{type: 'pie',name: year+'年',data: pieArr //数组 }]});//});}。

相关主题