Home > Developer > Web Develop
Highcharts is a simple JavaScript-written library of charts that makes it easy to add interactive diagrams to Web sites or Web applications, and Highcharts currently supports up to 18 different types of graphs, such as line charts, graphs, area charts, histograms, pie charts, scatter plots, and more. , you can meet any needs of the Web diagram!
The above is the Highcharts official online introduction!
If the syntax of the simple, or need to draw a simple function of the polyline, columnar and pie chart, Highcharts is far less than the JS icon Library--js charts, but if it involves complex and diverse features, highcharts dumped JS charts more than 8 street!
This type of JS framework is usually easy to learn. After downloading the package, look at the example, but Highcharts is doing very well at this point!
See:
Highcharts Home: http://www.hcharts.cn/index.php
Learn highcharts do not need to follow the package of examples example one by one to try (I learn JS charts is doing this!--),
With these 3 pages available on the website, you can master this technology in one hours!
Highcharts Chinese Course
Highcharts API Documentation
Highcharts Online Demo Platform
The key to learning is this online demo platform, which contains all the sample files in the download package. And you can click this "edit code" in the middle of the page to jump to an "online test platform" Place, like here http://www.hcharts.cn/test/index.php?from=demo&p=10
The online demo platform is also very detailed, but many of the sections are still being perfected ...
What is the entrance to Highcharts learning, which is the image of the official website (this is taken from the official website):
Here is all the properties of a chart. Glance.
Here is an example of a simple diagram on the official website:
This example is generated directly from the following code. I made a brief comment. The code is located under Highlchar-4.0.3, \highcharts-4.0.3\examples\line-labels\index.html, directly open.
<!DOCTYPE HTML><HTML> <Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"> <title>Highcharts Example</title> <!--It is worth noting that the highcharts operation requires two JS files, highcharts.js and jquery, MooTools, Prototype,
Highcharts a framework file in the Standalone framework. (copied from the official website ...) ) - <Scripttype= "Text/javascript"src= "Http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></Script> <styletype= "Text/css">${Demo.css} </style> <Scripttype= "Text/javascript">$(function () { $('#container'). Highcharts ({chart: {//settings for the overall chartType:' Line' //this defaults to line, which can also be a bar column, but the pie chart is not set here, but rather the type: ' Pie ' is specified directly on the series data column .}, Title: {//Chart TitleText:'Monthly Average Temperature' //Title name}, subtitle: {//subtitleText:'Source:WorldClimate.com'}, Xaxis: {//X-AxisCategories: ['Jan', 'Feb', 'Mar', 'APR', ' May', 'June', 'Jul', ' the', 'Sep', 'Oct', 'Nov', 'Dec'] //x-axis data}, YAxis: {//Y-Axistitle: {text:'temperature (? C)' //Y-Axis title}}, Plotoptions: {//various options for chart markingLine : {//because this is a line chart, it is the line chart optionDataLabels: {//Data LabelsEnabled:true //allow data to be displayed, default to False, no specific data is displayed}, Enablemousetracking:false //This allows the mouse to be placed on the data point, does not dynamically display a small circle, the default is True}}, Series: [{//It is more convenient to omit a data array, in fact, the following name and data are the attributes of the data array element, and the following 2 sets of data represent 2 groups of data in parallelName:'Tokyo', //Data Namedata: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] //Specific Data}, {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> </Head> <Body><Scriptsrc=".. /.. /js/highcharts.js "></Script><Scriptsrc=".. /.. /js/modules/exporting.js "></Script><DivID= "Container"style= "min-width:310px; height:400px; margin:0 Auto"></Div> </Body></HTML>
Highcharts is a simple JS chart framework, it is not recommended to carefully read the API documentation, it is recommended to follow the example and actual needs, while adding functionality, while learning quickly.
Reprint please indicate source: http://www.cnblogs.com/zrtqsk/p/4013980.html Thank you!
highcharts--Let your Web table draw the fly
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
