Highcharts: highly interactive javascript chart class library

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.