Jquery chart plug-in -- highcharts

Because the project needs to use chart generation, all of them are Google, find this plug-in, and write a demo along with it. Click to jump to the official website

The first three graphs are curves, histograms, and slices.

The data in the chart is purely the test data of the demo and has no actual intention. The following describes the general implementation steps.

Step 1: Download and reference the JS package (highcharts. JS). theme is as the name suggests.

You can download the demo and try it one by one to see how it works. Then, two styles are applied. In download, JavaScript files are printed and exported as images (it seems that they are uploaded to the official website through JS and then downloaded locally). Because projects are put on the Intranet, they are useless.

Step 2: Implement and paste the code.

1 var chart; 2 $ (document ). ready (function () {3 chart = new highcharts. chart ({4 chart: {5 renderto: 'Container', // container where the chart is placed 6 plotbackgroundcolor: NULL, 7 plotborderwidth: NULL, 8 defaultseriestype: 'line' 9 }, 10 Title: {11 text: 'jquery graph demo '12}, 13 Subtitle: {14 text: 'subtitle '15}, 16 xaxis: {// X axis data 17 categories: ['february ', 'february ', 'february ', 'february'], 18 labels: {19 rotation:-45, // font skew 20 align: 'right', 21 style: {Font: 'normal 13px '} 22} 23}, 24 yaxis: {// y axis display text 25 title: {26 text: '/27 '27} 28}, 29 tooltip: {30 enabled: True, 31 formatter: function () {32 return' <B> '+ this. X + '</B> <br/>' + this. series. name + ':' + highcharts. numberformat (this. y, 1); 33} 34}, 35 plotoptions: {36 line: {37 datalabels: {38 enabled: true39}, 40 enablemousetracking: true // whether title41} 42}, 43 series: [{44 name: 'hangzhou', 45 data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 46 },{ 47 name: 'jiangxi ', 48 data: [4.0, 2.9, 5.5, 24.5, 18.4, 11.5, 35.2, 36.5, 23.3, 38.3, 23.9, 3.6] 49 },{ 50 name: 'beijing', 51 data: [14.0, 12.9, 15.5, 14.5, 28.4, 21.5, 15.2, 16.5, 13.3, 28.3, 13.9, 13.6] 52 },{ 53 name: 'hunan ', 54 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] 55}] 56}); 57 });

This is all about configuration. The most important thing is the data in series. If you need to extract the data from the database, directly generate the JSON file and assign the value to it. The effect is brilliant, there is also a sense of dynamics, interested friends can download and run.

Note: The JS files in the download folder in the demo are exported and printed in English. I have modified them to Chinese, charset = "gb2312" is required to reference the JS file. I have written comments in the demo. Okay, so far.