How to Use the highcharts chart plug-in

The highcharts chart control is currently the most widely used chart control. This article will gradually introduce you to the highcharts chart control from scratch. In this article, you will learn how to configure highcharts and dynamically generate highchart charts.

Highcharts is a very popular pure JavaScript chart library with beautiful UI. It consists of two parts: highcharts and highstock. Highcharts provides intuitive and interactive charts for your website or web applications. Currently, line, spline, area, areaspline, bar chart, bar chart, pie chart, and scatter chart types are supported. Highstock allows you to easily create stock or general timeline charts. It includes advanced navigation options, preset date range, date selector, scroll and shift, etc.

Highcharts simple case:

Page index.html code

<! Doctype HTML> Data. js code:


$(function () {    $('.depmeting_charts').highcharts({        title: {            text: 'Monthly Average Temperature',            x: -20 //center        },        subtitle: {            text: 'Source: WorldClimate.com',            x: -20        },        xAxis: {            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']        },        yAxis: {            title: {                text: 'Temperature (°C)'            },            plotLines: [{                value: 0,                width: 1,                color: '#808080'            }]        },        tooltip: {            valueSuffix: '°C'        },        legend: {            layout: 'vertical',            align: 'right',            verticalAlign: 'middle',            borderWidth: 0        },        series: [{            name: 'Tokyo',            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]        }, {            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]        }]    });});
Page effects:



Highcharts has a website similar to bootstrap. We only need to copy the corresponding code to achieve the desired effect:
Highcharts Chinese case Website: http://www.hcharts.cn/demo/index.php
Highstock Chinese case Website: http://www.hcharts.cn/demo/highstock.php
This article also plays a leading role. If you want to study highcharts in depth, you can refer to the following two websites:
Http://www.highcharts.com/
Http://www.hcharts.cn/


How to Use the highcharts chart plug-in