The powerful jquery Chart Component-highcharts

Last Update:2015-03-28 Source: Internet

Author: User

Tags file copy jquery library

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Highcharts is a pure JavaScript class library that makes charts, with the following key features:

Compatibility: Compatible with all today's browsers, including iphone, IE and Firefox, etc.;
Completely free for individual users;
Pure JS, no BS;
Support most of the chart types: line graph, graph, area chart, area graph, histogram, pie chart, scatter chart;
Cross-language: Whether PHP, ASP, or Java is available, it requires only three files: one is the core file of Highcharts Highcharts.js, and a canvas emulator for IE and jquery class library or MooTools class library;
Hint function: The mouse moves to a point on the chart has the prompt information;
Zoom in: Select the chart section to enlarge, close up to observe the chart;
Ease of use: no need for special development skills, only need to set a few options to create a suitable chart;
Timeline: can be accurate to milliseconds

Download Plugin

Highcharts

Http://www.highcharts.com/download

Jquery

http://jquery.com/

This introduction is the Highcharts in the first file copy, and then add the other functions in the file, and then query the relevant information, export image format does not need to connect to the official server, just need to be local.

<%@ page language= "C #" autoeventwireup= "true" codebehind= "Default.aspx.cs" inherits= "highchart_export_module_asp _net._default "%>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>highchart JS Export Module sample</title>
<!--1. Introduction of jquery Library--
<script src= "Javascript/jquery-1.5.1.js" type= "Text/javascript" ></script>
<!--2. Introducing Highcharts Core Files--
<script src= "Http://highcharts.com/js/highcharts.js" type= "Text/javascript" ></script>
<!--3. Import the JS library file that you need---
<script src= "Http://highcharts.com/js/modules/exporting.js" type= "Text/javascript" ></script>
<script language= "javascript" type= "Text/javascript" >
var chart;
$ (document). Ready (function () {
Chart = new Highcharts.chart ({
Chart: {
Renderto: ' Container ',
Defaultseriestype: ' line ',//Chart category, values are: line, spline, area, Areaspline, bar, column, etc.
marginright:130,
Marginbottom:25
},
Title: {
Text: ' Monthly Average temperature ',//set first level title
X: -20//center
},
Subtitle: {
Text: ' Source:WorldClimate.com ',//set level two title
X:-20
},
Xaxis: {
Categories: [' Jan ', ' Feb ', ' Mar ', ' Apr ', ' may ', ' June ',
' Jul ', ']//', ' Sep ', ' Oct ', ' Nov ', ' Dec ' Set the X-axis title
},
YAxis: {
Title: {
Text: ' Temperature (â°c) '//Set the title of the y-axis
},
Plotlines: [{
value:0,
Width:1,
Color: ' #808080 '
}]
},
ToolTip: {
Formatter:function () {
Return ' <b> ' + this.series.name + ' </b><br/> ' +
This.x + ': ' + this.y + ' â°c '; The display information of the mouse is placed on the data point, but it will not be displayed when the setting shows the value of the data item for each node
}
},
Legend: {
Layout: ' Vertical ',
Align: ' right ',//Set caption text left/right/top/
VerticalAlign: ' Top ',
X:-10,
Y:100,
borderwidth:0
},
Exporting: {
Enabled:true,//used to set whether to show ' print ', ' Export ' function buttons, not set when default is displayed
URL: "http://localhost:49394/highcharts_export.aspx"//Export the image URL, the default export is needed to connect to the official website OH
},
Plotoptions: {
Line: {
DataLabels: {
Enabled:true//Displays the value of the data item per node for each curve
},
Enablemousetracking:false
}
},
Series: [{
Name: ' Tokyo ',//names of each line
Data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]//per line
}, {
Name: ' New York ',
Data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
Name: ' Berlin ',
Data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
Name: ' London ',
Data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});

});
</script>
<body>
<form id= "Form1" runat= "Server" >
<!--5. Import container for displaying charts--
<div id= "Container" style= "width:900px;" >
</div>
</form>
</body>

The exported picture format

You can do the page display and the exported picture is consistent.

The powerful jquery Chart Component-highcharts

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More