Introduce the JS file mentioned in the previous article in your project, create a new JS folder under the project root directory, and then put the previously downloaded JS file under this folder. The effect is as follows:
On the ASPX page at the front end, introduce the above JS file as follows:
<MCE: script src = "JS/jquery1.5.2.js" mce_src = "JS/jquery1.5.2.js" type = "text/JavaScript"> </MCE: SCRIPT> <br/> <MCE: script src = "JS/highcharts. JS "mce_src =" JS/highcharts. JS "type =" text/JavaScript "> </MCE: SCRIPT> <br/> <! -- Add a theme style JS file --> <br/> <MCE: script src = "JS/highcharts/themes/grid. JS "mce_src =" JS/highcharts/themes/grid. JS "type =" text/JavaScript "> </MCE: SCRIPT> <br/> <! -- Add export mode --> <br/> <MCE: script src = "JS/highcharts/modules/exporting. JS "mce_src =" JS/highcharts/modules/exporting. JS "type =" text/JavaScript "> </MCE: SCRIPT>
Next, let's take a look at the content in the script:
<MCE: Script Type = "text/JavaScript"> <! -- <Br/> var chart; <br/> $ (document ). ready (function () {<br/> chart = new highcharts. chart ({<br/> chart :{< br/> renderto: 'Container', <br/> defaultseriestype: 'region', // chart type line, spline, area, areaspline, column, bar, pie, column, scatter <br/> inverted: false // displayed left and right. By default, the upper and lower forward directions are displayed. If this parameter is set to true, the positions of horizontal and vertical coordinates are changed <br/>}, <br/> xaxis :{< br/> categories: ['monday', 'tues ', 'wedne', 'thurs', 'Friday', 'satur', 'sunday'], // coordinate value of the X axis <br/> title: {text: 'weeks '}, // y axis coordinate title labels: longitudinal bar ruler <br/>}, <br/> yaxis :{< br/> title: {text: 'People (persons) '}, // y axis coordinate title labels: vertical bar ruler <br/> min: 0 <br/>}, <br/> tooltip: {<br/> formatter: function () {<br/> // The formatting prompt when the cursor is suspended <br/> return 'Total number of students: '+ highcharts. numberformat (this. y, 1) + 'People <br/> current week:' + this. x; <br/>}< br/>}, <br/> credits :{< br/> enabled: false <br/>}, <br/> plotoptions: {<br/> column :{< br/> pointpadding: 0.2, // <br/> borderwidth: 0 // width of the chart column <br/> }, bar :{< br/> datalabels :{< br/> enabled: false <br/>}< br/>}, <br/> title: {text: 'chart title '}, // chart title <br/> Subtitle: {text: 'chart subtitle '}, // subtitle of the chart <br/> series: [{Name: 'number', data: [20, 40, 30, 90,100, 60, 50]}] <br/>}); </P> <p> // --> </MCE: SCRIPT>
The fields are annotated, so you can easily see the meaning of each field.
The following is a post of all the code, and:
<% @ Page Language = "C #" autoeventwireup = "true" codefile = "default. aspx. cs" inherits = "highcharts_default" %> <br/> <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead runat = "server"> <br/> <title> </title> <br/> <MCE: script src = "JS/jquery1.4.2.js" mce_src = "JS/jquery1.4.2.js" type = "text/JavaScript"> </MCE: SCRIPT> <br/> <MCE: script src = "JS/highcharts. JS "mce_src =" JS/highcharts/h Ighcharts. js "type =" text/JavaScript "> </MCE: SCRIPT> <br/> <! -- Add a theme style JS file --> <br/> <MCE: script src = "JS/highcharts/themes/grid. JS "mce_src =" JS/highcharts/themes/grid. JS "type =" text/JavaScript "> </MCE: SCRIPT> <br/> <! -- Add export mode --> <br/> <MCE: script src = "JS/highcharts/modules/exporting. JS "mce_src =" JS/highcharts/modules/exporting. JS "type =" text/JavaScript "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "> <! -- <Br/> var chart; <br/> $ (document ). ready (function () {<br/> chart = new highcharts. chart ({<br/> chart :{< br/> renderto: 'Container', <br/> defaultseriestype: 'column', // chart type line, spline, area, areaspline, column, bar, pie, column, scatter <br/> inverted: false // displayed left and right. By default, the upper and lower forward directions are displayed. If this parameter is set to true, the positions of horizontal and vertical coordinates are changed <br/>}, <br/> xaxis :{< br/> categories: ['monday', 'tues ', 'wedne', 'thurs', 'Friday', 'satur', 'sunday'], // coordinate value of the X axis <br/> title: {text: 'weeks '}, // y axis coordinate title labels: longitudinal bar ruler <br/>}, <br/> yaxis :{< br/> title: {text: 'People (persons) '}, // y axis coordinate title labels: vertical bar ruler <br/> min: 0 <br/>}, <br/> tooltip: {<br/> formatter: function () {<br/> // The formatting prompt when the cursor is suspended <br/> return 'Total number of students: '+ highcharts. numberformat (this. y, 1) + 'People <br/> current week:' + this. x; <br/>}< br/>}, <br/> credits :{< br/> enabled: false <br/>}, <br/> plotoptions: {<br/> column :{< br/> pointpadding: 0.2, // <br/> borderwidth: 0 // width of the chart column <br/> }, bar :{< br/> datalabels :{< br/> enabled: false <br/>}< br/>}, <br/> title: {text: 'chart title '}, // chart title <br/> Subtitle: {text: 'chart subtitle '}, // subtitle of the chart <br/> series: [{Name: 'number', data: [20, 40, 30, 90,100, 60, 50]}] <br/>}); </P> <p> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <Form ID = "form1" runat = "server"> <br/> <Div> <br/> <Div id = "Container" style = "width: 800px; Height: 400px; margin: 0 auto "> <br/> </div> <br/> </form> <br/> </body> <br/> </ptml>
If you change defaserseriestype: 'column'
Defaultseriestype: 'spline
', // Chart type line, spline, area, areaspline, column, bar, pie, column, scatter
The style is as follows:
If you change defaserseriestype: 'column'
Defaultseriestype: 'area
', // Chart type line, spline, area, areaspline, column, bar, pie, column, scatter
The style is as follows:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
