JS Pie chart (with percent) function realization, the new person must understand

Source: Internet
Author: User

1<! DOCTYPE html>234<meta charset="Utf-8"/>5<title></title>6<script src=".. /.. /js/my/highcharts.js"></script>7<script src=".. /.. /css2/jquery-1.10.2.min.js"></script>89<body>Ten<divclass="Piecleft"Id="Chart"style="height:350px; width:350px;"> One</div> A<script type="Text/javascript"charset="Utf-8"> - $.ajax ({ -Url:"/handler/hbtongji.ashx", theType"GET", - data: {}, - success:function (data) { -  +                 varobj = eval ('('+ Data +')'); -Transfer = parseint (obj[" State"][0]["Transfer"]); +Transferno = parseint (obj[" State"][1]["Transferno"]); A                 varDataSet =[transfer, Transferno]; at                 varChart; - $ (document). Ready (function () { -Chart =NewHighcharts.chart ({ - Chart: { -Renderto:'Chart' -                         }, in title: { -Text'Allocation of land pie chart statistics' to                         }, + PlotArea: { -ShadowNULL, theBorderWidth:NULL, *BackgroundColor:NULL $                         },Panax Notoginseng tooltip: { - formatter:function () { the                                 return '<b>'+ This. Point.name +'</b>:'+ Highcharts.numberformat ( This. Percentage,1) +'% ('+ +Highcharts.numberformat ( This. Y,0,',') +'each)'; A                             } the                         }, + plotoptions: { - pie: { $Allowpointselect:true, $Cursor'Pointer', - DataLabels: { -Enabledtrue, the formatter:function () { -                                         if( This. percentage >4)return  This. Point.name;Wuyi                                     }, theColor' White', - style: { WuFont'13px trebuchet MS, Verdana, Sans-serif' -                                     } About                                 } $                             } -                         }, - legend: { -BackgroundColor:'#FFFFFF', AX:0, +Y:- - the                         }, - credits: { $Enabledfalse the                         }, the series: [{ theType'Pie', theName'Browser Share', - data: [ in['non-allocated plots', transfer], the['Allocated Plots', Transferno] the                             ] About                         }] the                     }); the                 }); the             } +         }) -  the</script>Bayi</body> theHTML page
1<%@ WebHandler language="C #"class="Hbtongji"%>2 3 usingSystem;4 usingsystem.web;5 usingSystem.Data;6 usingSystem.Text;7 usingSystem.Runtime.Serialization.Json;8 usingSystem.Web.Script.Serialization;9 usingKanghui.baseclass;Ten usingKanghui.common; One  A  -  Public classHbtongji:ihttphandler { -  the      Public voidProcessRequest (HttpContext context) { -         stringcon = confighelper.getconnectionstring ("DBConnection"); -         //This is a display of data (number of parcels not sold) -         stringsql ="SELECT COUNT (*) as sum from Mhuabo WHERE stateid=4"; +         //This is a displayed data (number of assigned plots) -         stringSQL1 ="SELECT COUNT (*) as sum from Mhuabo WHERE stateid=5"; +DataSet ds =dbhelpersql.query (Sql,con); ADataSet DS1 =dbhelpersql.query (Sql1,con); at  -StringBuilder str =NewStringBuilder (); -Str. Append ("{\ "state\": [{\ "transfer\": \ ""+ ds. tables[0]. rows[0]["sum"] +"\ "},{\" transferno\ ": \""+ DS1. tables[0]. rows[0]["sum"] +"\"}]"); -Str. Append ("}"); - context. Response.Write (str. ToString ()); -     } in  -  to      Public BOOLisreusable { +         Get { -             return false; the         } *     } $ Panax Notoginseng}
General Handler Page

Company projects to do statistics, pie chart is essential, idle hand, write down this blog, hope to help novice you.

-----------------------------------------before the pie chart.

-----------------------------------------Click on the pie chart

JS Pie chart (with percent) function realization, the new person must understand

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.