jquery and Highcharts line charts, column charts, pie charts-simulate background source code

JS Code:

<script type= "Text/javascript" > $ (function () {showline (); Showcolumn (); Showpie ();}); function Showpie () {Jquery.ajax ({type: "Get", url: "Csylline.json", Async:false,datatype: "JSON", Success:function ( DATA1) {$ (' #pieChart '). Highcharts ({chart: {plotbackgroundcolor:null,plotborderwidth:null,plotshadow:false,type: ' Pie '},title: {//Title text: ' Chengguan District a week of rainfall in total city share '},tooltip: {//Hint box Pointformat: ' {series.name}: <b>{point.percentage :.1f}%</b> '},plotoptions: {pie: {allowpointselect:true,cursor: ' pointer ', DataLabels: {enabled:false},showinl Egend:true}},series: [{//Data column name: ' Browser share ', data:data1.dataList}], credits:{//Copyright information enabled : false}}); },error:function (ERR) {alert (err);}}); }function ShowLine () {Jquery.ajax ({type: "Get", url: "Csylline.json", Async:false,datatype: "JSON", Success:function ( DATA1) {$ (' #lineChart '). Highcharts ({title: {text: ' Chengguan District ' a week of temperature in a line chart ', x: -20},//center Title Xaxis: {          Categories:data1.xList},//Horizontal data point text YAxis: {title: {text: ' Temperatu                Re (°c) '//y coordinate description}, plotlines: [{value:0, width:1,            Color: ' #808080 '}]}, tooltip: {valuesuffix: ' °c '}, Legend: {                borderwidth:0}, Series:data1.yList,//This defines two series, two lines, the highest temperature and the lowest temperature, assuming that many others add braces inside. Credits: {//Copyright Information Enabled:false}}); } });} function Showcolumn () {Jquery.ajax ({type: "Get", url: "Csylline.json", Async:false,datatype: "JSON", Success:function ( DATA1) {$ (' #columnChart '). Highcharts ({chart: {type: ' column '//Column chart}, title        : {text: ' Chengguan District one-week rainfall forecast '}, Xaxis: {categories:data1.xList}, YAxis: {min:0, title: {text: '%/mm '}, tooltip: {pointformat: ' {series.name}: <b>{point.y} &                Lt;/b> ', Shared:true, usehtml:true}, Plotoptions: {            Column: {pointpadding:0.2, borderwidth:0}},    Series:data1.zList,}); }    });} </script>

Background JSON format:

{"Xlist": ["09-10", "09-11", "09-12", "09-13", "09-14", "09-15", "09-16"],//x axis data (polyline, column) "Ylist": [{"Name": "Day maximum temperature", "data ": [28,28,27,26,29,32,25]}, {" Name ":" Day Lo "," Data ": [15,15,14,13,16,19,12]}]," Zlist ": [{         " name ":" Rainfall probability ",         " Data ": [16.0, 20.6, 48.5, 27.4, 19.1, 15.6, 0]     },{         " name ":" Daily Rainfall ",             " data ": [0.8, 0.5, 9.3, 1.0, 0.8, 0.6, 0]
   }],//line and column charts are consistent "dataList": [["East", 1],["flat", 2],["East", 4],["West", 1],["suburb", 1]        ]//pie chart Data    }

jquery and Highcharts line charts, column charts, pie charts-simulate background source code