jquery和highcharts折线图、柱形图、饼状图-模拟后台传参源码

来源：互联网发布：php 获取视频预览图编辑：程序博客网时间：2024/05/29 19:38

js代码：

<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 : { // 标题text : '城关区一周降雨地区占全城份额比例'},tooltip : { // 提示框pointFormat : '{series.name}: <b>{point.percentage:.1f}%</b>'},plotOptions : {pie : {allowPointSelect : true,cursor : 'pointer',dataLabels : {enabled : false},showInLegend : true}},series : [ { // 数据列name : 'Browser share',data : data1.dataList} ],        credits:{ // 版权信息        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: '城关区一周内气温情况折线图',            x: -20         },//center标题        xAxis: {           categories: data1.xList        }, //横坐标数据点文字        yAxis: {            title: {                text: 'Temperature (°C)'  //Y坐标说明            },            plotLines: [{                value: 0,                width: 1,                color: '#808080'            }]        },        tooltip: {            valueSuffix: '°C'        },        legend: {            borderWidth: 0        },        series: data1.yList,  //此处定义两个series，即两条线，最高气温和最低气温，如果更多则在里面添加大括号。                credits: { // 版权信息            enabled: false        }    }); } });}function showColumn() {jQuery.ajax({type: "get",url: "csylLine.json",async: false,dataType: "json",success:function(data1){    $('#columnChart').highcharts({    chart: {                type: 'column'  //柱形图             },            title: {                text: '城关区一周降雨预报'            },        xAxis: {                categories: data1.xList            },        yAxis: {                min: 0,                title: {                    text: '%/mm'                }            },            tooltip: {                pointFormat:'{series.name}: <b>{point.y} </b>',                shared: true,                useHTML: true            },            plotOptions: {                column: {                    pointPadding: 0.2,                    borderWidth: 0                }            },            series: data1.zList,    });    }    });}</script>

后台传参json格式：

{"xList":["09-10", "09-11", "09-12", "09-13", "09-14", "09-15", "09-16"],//x轴的数据（折线、柱形）"yList":[{ "name": "日最高温","data": [28,28,27,26,29,32,25] }, { "name": "日最低温","data": [15,15,14,13,16,19,12]}],"zList":[{         "name": "降雨几率",         "data": [16.0, 20.6, 48.5, 27.4, 19.1, 15.6, 0]     },{         "name": "日降雨量",             "data": [0.8, 0.5, 9.3, 1.0, 0.8, 0.6, 0]    }],//折线图和柱形图是一致的"dataList":[["城东",1],["平区",2],["东区",4],["西区",1],["郊区",1]        ]//饼状图数据    }

0 0