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

This article mainly shows you "how to use Highcharts to generate bar chart", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use Highcharts to generate bar chart" this article.

1. Annual Financial Expenditure Chart

With the following configuration, you can generate a statistical chart in which the bar chart coexists with the curve, double Y-axis, X-axis label rotation (if the label name is too long), and XY axis can be enlarged without LOGO information. For more information, please see the code and comments:

Var chart;$ (function () {chart = new Highcharts.Chart ({chart: {renderTo: 'chart_column', / /) the container where the chart is placed, the associated DIV#id zoomType:' xy' / / X, Y axis can be magnified / / because the bar chart and the graph exist in one chart, so the default chart type is not set here. }, title: {text: '2011-2012 Financial Expenditure Chart' / / Chart title}, subtitle: {text: 'data Source: Sina Finance' / / Chart subtitle}, credits: {enabled: false / / do not show LOGO} XAxis: [{/ / X axis tags categories: [March 2010, April 2010, May 2010, June 2010, July 2010, August 2010, October 2010, November 2010, December 2010, March 2011, April 2011, May 2011 June 2011, July 2011, August 2011, September 2011, October 2011, November 2011], labels: {rotation:-45, / / rotate 45 °counterclockwise The label name is too long. Align: 'right' / / set right alignment}}], yAxis: [{/ / set Y axis-first (growth) labels: {formatter: function () {/ / format tag name return this.value +'%' }, style: {color:'# 89A54E'/ / set label color}}, title: {text:'}, / / Y axis title is set to empty opposite: true / / displays on the right side of the Y axis, usually false, the left shows the Y axis Below shows the X axis}, {/ / sets the Y axis-the second (amount) gridLineWidth: 0, / / sets the grid width to 0 Because the first Y axis defaults to a grid width of 1 title: {text:'}, / / the Y axis title is set to empty labels: {formatter: function () {/ / format tag name return this.value + 'trillion yuan' }, style: {color:'# 4572A7' / / set label color}] Tooltip: {/ / mouse over the prompt box displayed in the data area formatter: function () {/ / format prompt box information var unit = {'amount': 'billion yuan', 'increase':'%'} [this.series.name] Return'+ this.x +':'+ this.y +''+ unit }, legend: {/ / set legend layout: 'vertical', / / horizontal legend shadow: true, / / set shadow}, series: [{/ / data column name:' amount', color:'# 4572A7, type: 'column' / / Type: vertical bar chart yAxis: 1, / / data columns are associated to the Y axis The default is 0 A setting of 1 indicates that the second Y axis mentioned above is associated with the amount data: [5923.95, 5575.55, 5786.7, 8119.15, 5810.87, 6413.69, 6488.3, 10599.64, 17982, 7570, 7304.45, 8268, 10809.12,6949.92,8076.92,10018.558079.03,11396.18] / amount data}, {name: 'increase' Color: '89A54E, type:' spline', / / Type: graph data: [18.3,9.8,25.6,26.8,16.6,35.4,38.5,66.9,-10.4,27.8,31.0,42.9,33.1,19.6,25.9,18.3 24.5 focus 7.5] / / increase data}]}) (2) the male-to-female ratio of graduates from different colleges

We all use static data in the previous examples. In this case, I want to read the data in the mysql data table through PHP, and then process it to generate a male-to-female ratio map for Highcharts.

First of all, a simple chart _ student is designed to store the number of boys and girls in each college.

Then, connect to the mysql table and read the data:

Include_once ('connect.php'); / / Connect database file $res = mysql_query ("select * from chart_student"); / / query read chart_studentwhile ($row = mysql_fetch_array ($res)) {/ / Circular result set $college [] = $row [' college']; / / get college name $male [] = intval ($row ['male']) / / get the number of boys and convert it to a digital integer $female [] = intval ($row ['female']); / / get the number of girls and convert it to a digital integer}

This example will generate a horizontal bar chart through Highcharts. The Y axis represents the college and the X axis represents the male-to-female ratio distribution of each college. The name of the college is obtained as the Y-axis label through the above PHP code, and the number of boys and girls in each college is calculated as the proportion of the X-axis.

Next, to configure Highcharts, look at the code and comments:

Var chart $(function () {chart = new Highcharts.Chart ({chart: {renderTo: 'chart_bar', / / the container placed by the chart, the associated DIV#id defaultSeriesType:' bar' / / icon type is bar That is, horizontal bar statistical chart}, title: {text: 'male-to-female ratio distribution map of the class of 2011' / / set chart title}, xAxis: {/ / set X-axis categories: / / output the name of the college to be read through PHP in JSON format} YAxis: {/ / set Y axis min: 0, / / minimum value is 0 title: {text:''}}, plotOptions: {/ / set data point series: {stacking: 'percent' / / data point association combination In the form of percentage}, series: [{name: 'male', data: / / the number of male students to be read through PHP and output in JSON format}, {name: 'female', data: / / the number of female students to be read through PHP and output in JSON format}}) });

This produces a male-to-female ratio map, please click here to see demo.

The above is all the contents of the article "how to use Highcharts to generate histograms". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.