前端

ajax请求返回Json字符串运用highcharts数据图表展现数据

云博小周宇2 Mins Read

[1].[图片] Json字符串和highcharts数据图表展现.jpg 跳至 [1] <a href="http://www.oschina.net/code/piece_full?

code=26754#44745″ rel=”nofollow” target=”_blank”> [2]

[2].[代码] Json字符串和highcharts数据图表展现 跳至<a href="http://www.oschina.net/code/piece_full?

code=26754#44747″ rel=”nofollow” target=”_blank”>[1] <a href="http://www.oschina.net/code/piece_full?

code=26754#44745″ rel=”nofollow” target=”_blank”> [2]

001 /*
002 * Filename: OQtyOrPriceReport.js
003 * Description:客户订单数量和价格报表分析
004 * Created: 2013.11.14
005 * Author : liangjw
006 * Company:Copyright (C) 2013 Create Family Wealth Power By Peter
007 */
008 ////////////////////////////////////////////////////////////////////////////////////////////////////
009 var dataTmp = "";
010 $(function () {
011 ????GetseriesValue();? //获取数据源信息
012 });
013 ?
014 //获取数据源信息
015 //////////////////////////////////////////////////////////////////////
016 function GetseriesValue() {
017 ?
018 ????var DropCustomerName = $("#DropCustomerName").val();? //获取客户名称
019 ?
020 ????$.ajax({
021 ????????type: "get",
022 ????????url: "/ashx/GetClassTypeJosn.ashx",
023 ????????data: { method: "mlqtylist", DropCustomerName: DropCustomerName },
024 ????????dataType: "json",
025 ????????cache: false,
026 ????????success: function (result) {
027 ????????????dataTmp = "";
028 ????????????$.each(result, function (i, field) {
029 ????????????????//拼接json数据集字符串
030 ????????????????dataTmp += "{name: ‘" + field.CustomerName + "‘,data: [" + field.Jan + ", " + field.Feb + ", " + field.Mar + ", " + field.Apr
031 ????????????????+ ", " + field.May + ", " + field.Jun + "," + field.Jul + ", " + field.Aug + "," + field.Sep + ", " + field.Oct
032 ????????????????+ "," + field.Nov + ", " + field.Dec + "]}" + ",";
033 ????????????});
034 ????????????//去除最后一个字符
035 ????????????dataTmp=dataTmp.substring(0, dataTmp.length - 1);
036 ????????????GetData(dataTmp);
037 ????????},
038 ????????error: function () {
039 ????????????alert("请求超时。请重试！");
040 ????????}
041 ????});
042 };
043 ?
044 //绑定获取数据信息操作
045 //////////////////////////////////////////////////////////////////////
046 function GetData(dataTmp) {
047 ?
048 ????//绑定数据信息
049 ????$(‘#container‘).highcharts({
050 ????????chart: {
051 ????????????backgroundColor: {
052 ????????????????linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
053 ????????????????stops: [
054 ????????????[0, ‘rgb(255, 255, 255)‘],
055 ????????????[1, ‘rgb(240, 240, 255)‘]
056 ?????????]
057 ????????????},
058 ????????????borderWidth: 2,
059 ????????????plotBackgroundColor: ‘rgba(255, 255, 255, .9)‘,
060 ????????????plotShadow: true,
061 ????????????plotBorderWidth: 1
062 ????????},
063 ????????title: {
064 ????????????text: ‘Monthly? Total Information ‘,
065 ????????????x: -20
066 ????????},
067 ????????subtitle: {
068 ????????????text: ‘Source: winnaodan.net‘,
069 ????????????x: -20
070 ????????},
071 ??????????lang: {
072 ????????????printChart: ‘打印图表‘,
073 ????????????downloadPNG: ‘下载JPEG 图片‘,
074 ????????????downloadJPEG: ‘下载JPEG文档‘,
075 ????????????downloadPDF: ‘下载PDF 文件‘,
076 ????????????downloadSVG: ‘下载SVG 矢量图‘,
077 ????????????contextButtonTitle: ‘下载图片‘
078 ????????},
079 ????????xAxis: {
080 ????????????gridLineWidth: 1,
081 ????????????lineColor: ‘#000‘,
082 ????????????tickColor: ‘#000‘,
083 ????????????categories: [‘Jan‘, ‘Feb‘, ‘Mar‘, ‘Apr‘, ‘May‘, ‘Jun‘, ‘Jul‘, ‘Aug‘, ‘Sep‘, ‘Oct‘, ‘Nov‘, ‘Dec‘]
084 ????????},
085 ????????yAxis: {
086 ????????????minorTickInterval: ‘auto‘,
087 ????????????lineColor: ‘#000‘,
088 ????????????lineWidth: 1,
089 ????????????tickWidth: 1,
090 ????????????tickColor: ‘#000‘,
091 ????????????min: 0,
092 ????????????labels: {
093 ????????????????formatter: function () {? //设置纵坐标值的样式
094 ????????????????return this.value + ‘/Qty‘;
095 ????????????????}
096 ????????????},
097 ????????????title: {
098 ????????????text: ‘Total Analyze? (Qty)‘
099 ????????????},
100 ????????????plotLines: [{
101 ????????????????value: 0,
102 ????????????????width: 1,
103 ????????????????color: ‘#808080‘
104 ????????????}]
105 ????????},
106 ????????tooltip: {
107 ????????????formatter: function () {
108 ????????????????return ‘<b>‘ + this.series.name + ‘</b><br/>‘ + this.x + ‘: ‘ + this.y + yAxisLabels;
109 ????????????}
110 ????????},
111 ????????legend: {
112 ????????????itemStyle: {
113 ????????????????font: ‘9pt Trebuchet MS, Verdana, sans-serif‘,
114 ????????????????color: ‘black‘
115 ????????????},
116 ????????????itemHoverStyle: {
117 ????????????????color: ‘#039‘
118 ????????????},
119 ????????????itemHiddenStyle: {
120 ????????????????color: ‘gray‘
121 ????????????},
122 ????????????layout: ‘vertical‘,
123 ????????????align: ‘right‘,
124 ????????????verticalAlign: ‘middle‘,
125 ????????????borderWidth: 0
126 ????????},
127 ????????series: eval("[" + dataTmp + "]")? //获取数据源操作信息
128 ????});
129 }

?

? 我仅仅能说不要太崇拜哥。MM可私信哥，男性程序员的就免了，发了哥也不会回。
? zhe-jiang.he@hp.com