Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use Highcharts for you. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Highcharts is a very powerful pure javascript class library, which mainly provides rich, beautiful and interactive charts for your WEB applications. At present, Highcharts supports chart types such as line chart, graph, area chart, area curve, bar chart, pie chart and scatter chart.

Highcharts does not need to preload flash controls like flash charts, so it is compatible with almost all browsers, including iphone and the old-fashioned IE6. Highcharts also provides a wealth of parameter configurations, developers can generate a variety of charts through different configurations. In addition, Highcharts also supports chart export, chart local magnification, chart hints, multi-chart coexistence and other features.

Prepare for

We need to first combine the jquery library and the highcharts chart library.

Var chart $(function () {chart = new Highcharts.Chart ({chart: {renderTo: 'chart_line', / / corresponding id attribute defaultSeriesType:' line' / / chart type line, spline, area, areaspline, column, bar, pie, scatter}, title: {text: 'monthly mean temperature in major cities', / / chart title x:-20 / / center}, subtitle: {text: 'data from the network' / / subtitle x:-20}, xAxis: {/ / x axis categories: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']}, yAxis: {/ / y axis title: {text: 'mean temperature (°C)'} PlotLines: [{value: 0, width: 1, color:'# 808080'}]}, tooltip: {formatter: function () {/ / formatting prompt return'+ this.series.name +'+ this.x +':'+ this.y +'°C 'when the mouse hovers over the data point }, legend: {/ / [Legend] location style layout: 'vertical', / / [Legend] shows style: horizontal (horizontal) / vertical (vertical) backgroundColor:' # FFFFFF', align: 'top', x: 100,y: 70, floating: true, shadow: true}, series: [{name:' Beijing', data: [- 4.6,4.5,4.5,13.1, 19.8] 24.0,25.8,24.4,19.3,12.4,4.1,2.7]}, {name: 'Shanghai', data: [3.5,4.6,8.3,14.0,18.8,23.3, 27.8,27.7,23.6,18.1, 12.2,6.2]}, {name: Changsha, data: [4.7,6.2,10.9,16.8,21.6] 25.9,29.3,28.7,24.3,19.0,12.5,7.0]}, {name: 'Guangzhou', data: [13.3,14.4,17.7,21.9,24.6,27.2,30.8, 32.1,27.2,23.7,21.3,15.6]}) })

In this way, you can generate a beautiful linear chart.

This is the end of the article on "how to use Highcharts". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.