Jquery and highcharts line charts, column charts, and pie charts-source code for simulating background parameter passing

Jquery and highcharts line charts, column charts, and pie charts-source code for simulating background parameter passing

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) {$ ('# piechar '). highcharts ({chart: {plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie '}, title: {// title text: 'percentage of rainfall regions in the whole city in the chengguan district during the week'}, tooltip: {// prompt box pointFormat: '{series. name }:{Point. percentage:. 1f} %'}, PlotOptions: {pie: {allowPointSelect: true, cursor: 'pointer', dataLabels: {enabled: false}, showInLegend: 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: 'line chart of temperature in one week in the chengguan area ', x:-20}, // center title xAxis: {categories: data1.xList }, // yAxis: {title: {text: 'temperature (°C) '// Y coordinate description}, plotLines: [{value: 0, width: 1, color: '#808080'}]}, tooltip: {valueSuffix: '°c '}, legend: {borderWidth: 0}, series: data1.yList, // two series are defined here, that is, two lines, the highest temperature and the lowest temperature. If there are more lines, add braces. 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: 'Weekly rainfall forecasts in the Customs region'}, xAxis: {categories: data1.xList}, yAxis: {min: 0, title: {text: '%/mm'}, tooltip: {pointFormat:' {series. name }:{Point. y}', Shared: true, useHTML: true}, plotOptions: {column: {pointPadding: 0.2, borderWidth: 0 }}, series: data1.zList ,});}});} </script>

Json format for parameter passing in the background:

{"XList": ["09-10", "09-11", "09-12", "09-13", "09-14 ", "09-15", "09-16"], // X-axis data (line, column) "yList": [{"name": "maximum daily temperature ", "data": [28, 28, 27,26, 29,32, 25] },{ "name": "The lowest daily temperature", "data, 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]}], // The line chart and column chart are consistent with the "dataList": [["" ", 1], [" ", 2], [" ", 4], ["West District", 1], ["suburb", 1] // pie chart data}