In the company due to the need to analyze the order data, so the use of the Highcharts tool
<block name= "Js" > <script type= "Text/javascript" >//Chart Properties, does not contain data varOptions ={chart: {renderto:' Container ', Plotbackgroundcolor:NULL, Plotborderwidth:NULL, Plotshadow:false}, Credits: {enabled:false}, Title: {text:' Various types of service Sales pie chart '}, Legend: {margin:40}, tooltip: {formatter:function () { return This. Series.Name + ': ' + ' <b> ' + This. percentage.tofixed (2) + '% ' + ' </b><br/> ' + ' Order number: ' + This. Y; }}, Plotoptions: {pie: {allowpointselect:true, cursor:' Pointer ', DataLabels: {enabled:true, Format:' <b>{point.name}</b>: {point.percentage:.1f}% ' + ' <br/><b> order number: </b>{point.y}<br/ ><b> Total amount: </b>{point.cost} meta <br/><b> average amount: </b>{point.average} yuan ', Style: {color: (highcharts.theme&& Highcharts.theme.contrastTextColor) | | ' Black '}}, Events: {//bind fixed-point time Click:function(obj) {window.location.href=Obj.point.url; }}, Showinlegend:true}}, Series: [{type:' Pie ', Name:' Proportion: ', data: []}]}; //Initial function if(document.getElementById (' order_date_to ')! =NULL){ $(function() {querydata (); }); } varPiearr = []; varTooltiparr = []; //Ajax get data and parse create Highcharts chart functionQuerydata () {varOrderdatefrom = document.getElementById (' Order_date_from ')). Value; varOrderdateto = 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) {varValue = {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+ "to" +orderdateto+ "all kinds of Service Sales pie chart"; options.series[0].data =Piearr; varChart =NewHighcharts.chart (options); } }); }</script></block>
Background code: Using AJAX to pass data.
:
If you have any questions, email to:[email protected]
Highcharts Pie chart use case