首页 > 代码库 > highcharts饼状图使用案例
highcharts饼状图使用案例
在公司由于需要对订单数据进行分析,故使用到了highcharts工具
<block name="Js"> <script type="text/javascript">//图表属性,不包含数据 var options = { chart: { renderTo:‘container‘, plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, credits: { enabled:false }, title: { text: ‘各类型服务销售饼状图‘ }, legend: { margin:40 }, tooltip: { formatter: function () { return this.series.name + ‘: ‘ + ‘<b>‘+this.percentage.toFixed(2)+‘%‘+‘</b><br/>‘ + ‘订单数: ‘ + this.y; } }, plotOptions: { pie: { allowPointSelect: true, cursor: ‘pointer‘, dataLabels: { enabled: true, format: ‘<b>{point.name}</b>: {point.percentage:.1f} %‘+‘<br/><b>订单数:</b>{point.y}<br/><b>总金额:</b>{point.cost}元<br/><b>平均金额:</b>{point.average}元‘, style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || ‘black‘ } }, events: { //绑定点击时间 click: function(obj) { window.location.href = obj.point.url; } }, showInLegend: true } }, series: [{ type: ‘pie‘, name: ‘占比:‘, data: [] }] }; //初始函数 if(document.getElementById(‘order_date_to‘) != null){ $(function () { queryData(); }); } var pieArr = []; var tooltipArr = []; //Ajax 获取数据并解析创建Highcharts图表 function queryData() { var orderDateFrom = document.getElementById(‘order_date_from‘).value; var orderDateTo = document.getElementById(‘order_date_to‘).value; $.ajax({ url:‘getRevenueProfiles?order_date_from=‘+orderDateFrom +‘&order_date_to=‘+orderDateTo, type:‘get‘, dataType:"json", success:function(data) { $.each(data,function(i,dailyData){ var value = http://www.mamicode.com/{name:dailyData[‘service_type_display‘], y:parseInt(dailyData[‘order_count‘]), url:dailyData[‘url‘], cost:parseFloat(dailyData[‘all_cost‘]), average:parseFloat(dailyData[‘average_cost‘])}; pieArr.push(value); }); options.title.text = orderDateFrom+"至"+orderDateTo+"各类服务销售饼状图"; options.series[0].data =http://www.mamicode.com/ pieArr; var chart = new Highcharts.Chart(options); } }); }</script> </block>
后台代码:利用ajax传递数据。
效果图:
如有问题发邮件至:taxkiss@163.com
highcharts饼状图使用案例
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。