首页 > 代码库 > jquery和highcharts折线图、柱形图、饼状图-模拟后台传参源码
jquery和highcharts折线图、柱形图、饼状图-模拟后台传参源码
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] ]//饼状图数据 }
jquery和highcharts折线图、柱形图、饼状图-模拟后台传参源码
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。