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

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

1. Prepare

In order to better explain, a table, chart_pie, is established in the Mysql database to represent the number of visits brought by each search engine. There are three fields in the table: id, title and pv. Id is a self-growing integer and primary key. Title represents the name of the search engine, and pv represents the corresponding traffic. The relevant data has been preset in the chart_ Pieter table, as shown in the figure:

2 、 PHP

In the pie.php file, write the following code:

Include_once ('connect.php'); / / Connect database $res = mysql_query ("select * from chart_pie"); while ($row = mysql_fetch_array ($res)) {$arr [] = array ($row [' title'], intval ($row ['pv']));} $data = json_encode ($arr)

The code uses the native PHP method to query mysq data, saves the result set of the query in an array $arr, and converts the array for front-end js calls.

3 、 Javascript

By configuring Highcharts, you can generate a beautiful pie chart, as detailed in the code and comments. If you don't know what Highcharts is, please refer to the previous article on this site (xuebuyuan.com).

Var chart $(function () {chart = new Highcharts.Chart ({chart: {renderTo: 'chart_pie', / / pie chart associated html element id value defaultSeriesType:' pie', / / default chart type is pie chart plotBackgroundColor:'# ffc', / / set chart area background color plotShadow: true / / set shadow}, title: {text: 'search engine Statistical Analysis' / / Chart title} Credits: {text: 'xuebuyuan.com'}, tooltip: {formatter: function () {/ / formatting prompt message return' + this.point.name +':'+ twoDecimal (this.percentage) +'%' }, plotOptions: {pie: {allowPointSelect: true, / / allow it to be selected, click on the selected sector to separate and display cursor: 'pointer', / / change to hand when the mouse is pointing to the sector (clickable) / / showInLegend: true, / / if you want to display the legend, set this item to true dataLabels: {enabled: true, / / set the data label to be visible That is, to display the data color corresponding to each sector:'# 000000colors, / / data display color connectorColor:'# 999colors, / / set the color of the connection lines in the sector of the data domain style: {fontSize: '12px' / / data display size}, formatter: function () {/ / formatted data return' + this.point.name +':'+ twoDecimal (this.percentage) +'%' }, series: [{/ / data column name: 'search engine', data: / / core data column is derived from the data read by php and parsed into JSON}]});})

In the above code, the core data data comes from the json data transformed by php in pie.php: $data. The format of the converted JSON data is as follows:

[["u767eu5ea6", 1239], ["google", 998], ["u641cu641c", 342], ["u5fc5u5e94", 421], ["u641cu72d7", 1239], ["u5176u4ed6", 83]]

Don't worry, Highcharts automatically parses the JSON data and generates percentage data.

In fact, the pie chart generated by Highcharts can also set the sector shape that is initially selected by default, that is, the sector shape selected by default will be separated from the whole circle for highlighting. This effect requires the default data format to be:

[{"name": "u767eu5ea6", "y": 1239, "sliced": true, "selected": true}, ["google", 998], ["u641cu641c", 342], ["u5fc5u5e94", 421], ["u641cu72d7", 259], ["u5176u4ed6", 83]]

Notice the first part of the code: {"name": "u767eu5ea6", "y": 1239, "sliced": true, "selected": true}, how to get this string with PHP? To do this, modify the php part of the code in pie.php:

While ($row = mysql_fetch_array ($res)) {if ($row ['id'] = = 1) {$arr1 [] = array ("name" = > $row [' title'], "y" = > intval ($row ['pv']), "sliced" = > true, / / default separation "selected" = > true / / selected by default);} else {$arr [] = array ($row [' title'], intval ($row ['pv'])) }} / / merge array $arrs = array_merge ($arr1,$arr); $data = json_encode ($arrs)

When we loop through the result set, when id is 1, we set this to select the sector by default, build the array $arr1, otherwise build another array, $arr, and then merge the two arrays and convert the merged array into json data for Highcharts to call.

In addition, format the data Mart, use this.percentage,Highcharts to automatically convert integers to percentages if you want to display percentages, and directly use this.y if you want to display the amount of data.

Percentage of usage:

Formatter: function () {/ / formatted data return'+ this.point.name +':'+ twoDecimal (this.percentage) +'%;}

Use the actual data:

Formatter: function () {/ / format data return'+ this.point.name +':'+ this.y;}

Note: when using percentage data, you need to force the data to retain two decimal places, otherwise there is a possibility of 37.0000000001, which is actually 37%. JS function twoDecimal () that retains 2 decimal places

The above is all the contents of the article "how to use Highcharts combined with PHP and Mysql to generate a pie chart". 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.