Highcharts Report--Let the chart on your page fly

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 Chinese 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 Chinese homepage: http://www.hcharts.cn/index.php

Highcharts Official website: http://www.highcharts.com/

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 in the Chinese language network, you will be able to 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>Highcharts a framework file in the Standalone framework. (copied from the official website ...) )--<script type= "Text/javascript" src= "Http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js" ></script&        Gt         <style type= "Text/css" >${demo.css} </style> <script type= "text/javascript" >$ (function () { $ (' #container '). Highcharts ({chart: {////Chart Overall settings type: ' line '//This is a column, but the pie chart is not set here, but directly on the series data column specify type: ' Pie ',}, Title: {//Chart title text: ' Month            Ly Average temperature '//title name}, subtitle: {//Subtitle text: ' Source:WorldClimate.com ' }, Xaxis: {//x axis categories: [' Jan ', ' Feb ', ' Mar ', ' Apr ', ' may ', ' June ', ' Jul ', ' Au '                    G ', ' Sep ', ' Oct ', ' Nov ', ' Dec ']//x axis data}, YAxis: {//y Axis title: { Text: ' Temperature (? C) '//y axis Title}}, PlotoptIons: {//charts with various options line: {//Here is a line chart, then the option D                    Atalabels: {//Data label Enabled:true//Allow display of data, default to False, no specific data},            Enablemousetracking:false//This lets the mouse on the data point, does not dynamically display a small circle, the default is true}}, Series: [{//omitted here a data array is more convenient, in fact, the following name and data are the attributes of the data array element, the following 2 sets of data, representing 2 sets of data and name: ' Tokyo ',//                Data name: [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> 
Highcharts Report--Let your Web table draw fly