First load the JS file: <SCRIPT src = "/script/jquery-1.3.2.min.js" type = "text/JavaScript"> </SCRIPT>
JS file to be loaded: <SCRIPT src = "/script/highcharts. js" type = "text/JavaScript"> </SCRIPT>
JS generates a bar chart
Foreground. aspx
View code
<DivID= "Chartbar"Style= "Width: pixel PX; Height: 250px; float: left"> </Div><DivID= "Chartpie"Style= "Width: 200px; Height: 250px; float: left"> </Div>
JS
View code
<SCRIPT type = "text/JavaScript"> VaR Chart; $ ( Function (){ // =================== Age distribution bar chart ====================== VaR Line1 = <% = mantotal %>; // Substatistical 1 Data VaR Line2 = <% = femantotal %>; // Substatistics 2 Data Chart = New Highcharts. Chart ({chart: {renderto: 'Chartbar' , Type: 'Column' }, Title: {text: 'Age distributions' }, Subtitle: {text: '' }, Credits: {enabled: False // Remove the link from the official website. }, Xaxis: {categories: <% = Xaxisstr %> }, Yaxis: {min: 0 , Title: {text: 'Number of students (persons )' }}, Legend: {layout: 'Signature' , Backgroundcolor: '# Ffff' , Align: 'Left' , Verticalalign: 'Top', X: 300 , Y: 30 , Floating: True , Shadow: False }, Tooltip: {formatter: Function (){ Return '<B>' + This . Series. Name + ': </B>' + This . Y + 'people' ;}}, Plotoptions: {Column: {pointpadding: 0.2 , Borderwidth: 0 , Shadow: False }}, Series: [{Name: Male' , Data: line1}, {Name: Female' , Data: line2}]});}) </SCRIPT>
Backend. aspx. CS
View code
Protected String Mantotal = String . Empty; Protected String Femantotal = String . Empty; Protected String Xaxisstr = String . Empty; Protected Void Page_load ( Object Sender, eventargs e) {binddistribution ();} /// <Summary> /// Inspection personnel distribution /// </Summary> Private Void Binddistribution () {system. Data. datatable dt = Ds. Tables [ 0 ]; Stringbuilder SB1 = New Stringbuilder (); stringbuilder sb2 = New Stringbuilder (); stringbuilder sb3 = New Stringbuilder (); For ( Int I = 0 ; I <DT. Rows. Count- 1 ; I ++) {Sb1.appendformat ( " {0 }, " , DT. Rows [I] [ " Male count " ]. Tostring (); sb2.appendformat ( " {0 }, " , DT. Rows [I] [ " Female count " ]. Tostring (); sb3.appendformat ( " '{0 }', " , DT. Rows [I] [ " Age Group " ]. Tostring ();} mantotal = " [ " + Sb1.tostring (). trimend ( ' , ' ) + " ] " ; Femantotal = " [ " + Sb2.tostring (). trimend ( ' , ' ) + " ] " ; Xaxisstr = " [ " + Sb3.tostring (). trimend (' , ' ) + " ] " ;}
Note: Obtain dt from the database:
Shows the generation chart.
JS generate pie chart
Foreground. aspx File
View code
<DivID= "Chartpie"Style= "Width: 200px; Height: 250px; float: left"> </Div>
JSCode
View code
<SCRIPT type = "text/JavaScript"> VaR Chart; $ ( Function (){ // =================== Age distribution pie chart ========================== VaR Data = [<% = percentagestr %> ]; VaR Piechart = New Highcharts. Chart ({chart: {renderto: 'Chartpie' , Plotbackgroundcolor: Null , Plotborderwidth: Null , Plotshadow: False }, Title: {text: 'Gender distribution fig' }, Tooltip: {formatter: Function (){ Return '<B>' + This . Point. Name + '</B>:' + This . Percentage + '%' ; }}, Credits: {enabled: False }, Plotoptions: {pie: {allowpointselect: True , Shadow: False , Cursor: 'Pointer' , Datalabels: {enabled: False }, Showinlegend: True }}, Series: [{type: 'Pie' , Name: 'Gender distribution fig' , Data: Data}]});}) </SCRIPT>
Backend. aspx. CS
View code
Protected String Percentagestr = String . Empty; Protected Void Page_load ( Object Sender, eventargs e) {binddistribution ();} /// <Summary> /// Inspection personnel distribution /// </Summary> Private Void Binddistribution () {system. Data. datatable dt = Ds. Tables [ 0 ]; For ( Int I = 0 ; I <DT. Rows. Count- 1 ; I ++ ) {Percentagestr = " ['Male ', " + Dt. Rows [DT. Rows. Count- 1 ] [ " Male count " ]. Tostring () +" ], ['Female ', " + Dt. Rows [DT. Rows. Count- 1 ] [ " Female count " ]. Tostring () + " ] " ;}
Note: dt is the same as dT used to generate a bar chart.
From: http://www.cnblogs.com/endora/archive/2012/12/21/endora22.html