1.曲线图
var chart; $(document).ready(function () {line()});function line() { var options = { chart: { renderTo: 'container', //放置图表的容器 plotBackgroundColor: null, plotBorderWidth: null, defaultSeriesType: 'line' }, title: { text: '<%=titleText %>' }, subtitle: { text: '' }, xAxis: {//X轴数据 categories: [<%=xData %>], //X轴数据，数组形式 labels: { rotation: -45, //字体倾斜 align: 'right', style: { font: 'normal 13px 宋体' } } }, yAxis: {//Y轴显示文字 title: { text: '开服数量' } }, tooltip: { enabled: true, formatter: function () { return '' + this.x + '' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 0); } }, plotOptions: { line: { dataLabels: { enabled: true }, enableMouseTracking: true//是否显示title } }, series: [ <%=yData %> //Y轴数据，数组形式 ] }; chart = new Highcharts.Chart( options ); } 2.病状图
function index() { var begintime = $("#<%=tbBeginTime.ClientID %>").val(); var endtime = $("#<%=tbEndTime.ClientID %>").val(); //Y轴 var jsondata=""; $.ajax({ type: "Get", //请求的方法 url: "AjaxHandle/HightChars_Ydata.ashx?type=" + _type + "&r=" + Math.floor(Math.random() * 1000 + 1), //要传递参数使用Ajax进行处理的类名称 data: { "name": "" + encodeURI(x_Data) + "", 'begintime': "" + begintime + "", "endtime": "" + endtime + "" }, dataType: "text", //返回的数据类型 global: false, //Ajax的范围 async: false, //异步执行 //成功情况下的处理 success: function (strReult) { if (strReult == "-1") { alert("请求数据失败!"); return; } datas = []; datas = eval("(" + strReult + ")"); }, //失败情况下的处理 error: function () { alert("Ajax请求数据失败!"); } }); switch (_type) { case "game": typeName = "游戏"; break; case "plat": typeName = "平台"; break; case "developer": typeName = "开发商"; break; case "theme": typeName = "题材"; break; case "type": typeName = "类型"; break; case "picturestyle": typeName = "画面风格"; break; default: break; } var options = { chart: { renderTo: 'container', //放置图表的容器 plotBackgroundColor: null, plotBorderWidth: null, defaultSeriesType: 'column' }, title: { text: '开服柱状图' }, subtitle: { text: '' }, xAxis: {//X轴数据 categories: x_Data, labels: { rotation: -45, //字体倾斜 align: 'right', style: { font: 'normal 13px 宋体' } } }, yAxis: {//Y轴显示文字 title: { text: '开服数量' } }, tooltip: { enabled: true, formatter: function () { return '' + this.x + '' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 0); } }, plotOptions: { line: { dataLabels: { enabled: true }, enableMouseTracking: true//是否显示title } }, series: [ { name: typeName, data: datas } ] }; chart = new Highcharts.Chart( options ); } 3.饼图
function index() { var begintime = $("#<%=tbBeginTime.ClientID %>").val(); var endtime = $("#<%=tbEndTime.ClientID %>").val(); $.ajax({ type: "Get", //请求的方法 url: "AjaxHandle/HightChar_Pie.ashx?type=" + _type + "&r=" + Math.floor(Math.random() * 1000 + 1), //要传递参数使用Ajax进行处理的类名称 data: { "name": "" + encodeURI(names) + "", 'begintime': "" + begintime + "", "endtime": "" + endtime + "" }, dataType: "text", //返回的数据类型 global: false, //Ajax的范围 async: false, //异步执行 //成功情况下的处理 success: function (strReult) { if (strReult == "-1") { alert("请求数据失败!"); return; } datas = []; datas = eval("(" + strReult + ")"); }, //失败情况下的处理 error: function () { alert("Ajax请求数据失败!"); } }); chart = new Highcharts.Chart({ chart: { renderTo: 'container', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: '饼状图' }, tooltip: { formatter: function () { return '' + this.point.name + ': ' + Highcharts.numberFormat(this.percentage, 1) + ' %'; } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', formatter: function () { return '' + this.point.name + ': ' + Highcharts.numberFormat(this.percentage, 1) + ' %'; } } } }, series: [{ type: 'pie', name: 'Browser share', // data: [ // // ['沧海笑', 60.0], { name: '神曲', y: 10.1, sliced: true, selected: true }, ['other', 9.9], ['傲剑', 20.0] // ] data: datas }] }); }