How to Use the Highcharts chart plug-in

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

 

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: