1. Introduction to Highcharts:
2. Highcharts chart Preview
1. line chart
2. curve chart
3. Scatter Plot
4. Area Chart
5. Area Graph
6. Bar Chart
7. Pie Chart
Iii. Call Method
1. Effect
2. Call Code
3. Code Description
Iv. Summary
1. Introduction to Highcharts:
Highcharts is a Javascript class library for creating charts. It can be used to create charts such as line charts, curves, area charts, area graphs, bar charts, pie charts, and scatter charts. Main features:
1. Tip: a prompt is displayed when you move the mouse over a certain point in the chart.
2. Zoom in: select the chart area to zoom in and observe the chart at close distance.
3. It is important that individual users are completely free of charge.
4. Compatibility: compatible with all browsers today, including iPhone, IE, and Firefox
5. Cross-language: Both PHP, Asp.net, and Java can be used. It only requires three files: one is the core file Highcharts. js, as well as a canvas emulator for IE and Jquery class libraries or MooTools Class Libraries
6. Most chart types are supported: line chart, line chart, Area Chart, Area Chart, column chart, pie chart, and scatter chart.
7. ease of use: no special development skills are required. You only need to set the options to create charts that suit you.
8. Timeline: accurate to milliseconds
9. Ajax support: Use arrays to accept Ajax values
2. Highcharts chart preview 1. line chart
2. curve chart
3. Scatter Plot
4. Area Chart
5. Area Graph
6. Bar Chart
7, pie chart more Demo please refer to the official website: http://www.highcharts.com/demo/
Iii. Call Method
Take Ajax data returned to the Chat Data Group as an example,
1. Effect
2. Call Code
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline'
},
title: {
text: 'Monthly Average Temperature in Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
title: {
text: 'Month'
}
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}
},
series: [{
name: 'Tokyo',
dataURL: 'tokyo.json'
}]
});
3. Code Description
DefaultSeriesType: Chart type, which can be line, spline, area, areaspline, bar, column, etc.
Title:Top title
Subtitle:Topic
XAxis:X axis. Data is assembled in arrays.
YAxis:Y axis, data is assembled as an array
Tooltip:Prompt information
Series:AGet data from jax and put it in the data
Iv. Summary
This chats JS class library is easy to use and has a variety of styles with brilliant results. The only drawback is that personal free Chat should have an official website. However, there is also a way to deal with it. To Cut the generated Chat, you should be able to remove the official website.
Other links
<Recommended> 35 excellent e-commerce website Interfaces
Form elements: 40 CSS/JS styles and Functional Technical Processing
We recommend Jquery's 40 beautiful navigation menus.