PHP mysql Highcharts implements pie chart

-- edit http://www.lai18.com 
-- 表的结构 `chart_pie` 
-- 
 
CREATE TABLE IF NOT EXISTS `chart_pie` ( 
 `id` int(11) NOT NULL AUTO_INCREMENT, 
 `title` varchar(30) NOT NULL, 
 `pv` int(10) NOT NULL, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ; 
 
-- 
-- 转存表中的数据 `chart_pie` 
-- 
 
INSERT INTO `chart_pie` (`id`, `title`, `pv`) VALUES 
(1, '百度', 1239), 
(2, 'google', 998), 
(3, '搜搜', 342), 
(4, '必应', 421), 
(5, '搜狗', 259), 
(6, '其他', 83);

/* edit http://www.lai18.com
 * PHP代码
 */
$query = mysql_query(select * from chart_pie); 
while($row = mysql_fetch_array($query)){ 
 $arr[] = array( 
  $row['title'],intval($row['pv']) 
 ); 
} 
$data = json_encode($arr);
jQuery
$(function() { 
 $('#highcharts').highcharts({ 
  chart: { 
   renderTo: 'chart_pie', 
   //饼状图关联html元素id值 
   defaultSeriesType: 'pie', 
   //默认图表类型为饼状图 
   plotBackgroundColor: '#ffc', 
   //设置图表区背景色 
   plotShadow: true //设置阴影 
  }, 
  title: { 
   text: '搜索引擎统计分析' //图表标题 
  }, 
  credits: { 
   text: 'jb51.net' 
  }, 
  tooltip: { 
   formatter: function() { //鼠标滑向图像提示框的格式化提示信息 
    return &#39;<b>&#39; + this.point.name + &#39;</b>: &#39; + twoDecimal(this.percentage) + &#39; %&#39;; 
   } 
  }, 
  plotOptions: { 
   pie: { 
    allowPointSelect: true, 
    //允许选中，点击选中的扇形区可以分离出来显示 
    cursor: &#39;pointer&#39;, 
    //当鼠标指向扇形区时变为手型（可点击） 
    //showInLegend: true, //如果要显示图例，可将该项设置为true 
    dataLabels: { 
     enabled: true, 
     //设置数据标签可见，即显示每个扇形区对应的数据 
     color: &#39;#000000&#39;, 
     //数据显示颜色 
     connectorColor: &#39;#999&#39;, 
     //设置数据域扇形区的连接线的颜色 
     style: { 
      fontSize: &#39;12px&#39; //数据显示的大小 
     }, 
     formatter: function() { //格式化数据 
      return &#39;<b>&#39; + this.point.name + &#39;</b>: &#39; + twoDecimal(this.percentage) + &#39; %&#39;; 
      //return &#39;<b>&#39; + this.point.name + &#39;</b>: &#39; + this.y ; 
     } 
    } 
   } 
  }, 
  series: [{ //数据列 
   name: &#39;search engine&#39;, 
   data: data //核心数据列来源于php读取的数据并解析成JSON 
  }] 
 }); 
});

formatter: function() { //格式化数据 
 return &#39;<b>&#39; + this.point.name + &#39;</b>: &#39; + twoDecimal(this.percentage) + &#39; %&#39;; 
}

/* edit http://www.lai18.com
 * JS代码
 */
formatter: function() { //格式化数据 
 return &#39;<b>&#39; + this.point.name + &#39;</b>: &#39; + this.y ; 
}

function twoDecimal(x) { //保留2位小数 
 var f_x = parseFloat(x); 
 if (isNaN(f_x)) { 
  alert('错误的参数'); 
  return false; 
 } 
 var f_x = Math.round(x * 100) / 100; 
 var s_x = f_x.toString(); 
 var pos_decimal = s_x.indexOf('.'); 
 if (pos_decimal < 0) { 
  pos_decimal = s_x.length; 
  s_x += &#39;.&#39;; 
 } 
 while (s_x.length <= pos_decimal + 2) { 
  s_x += &#39;0&#39;; 
 } 
 return s_x; 
}

More JS plugins

"JQuery Common Plug-in Tutorial" series of technical articles organized and collected

1 Detailed description of image lazy loading technology using jquery plug-in

2 Pure JAVASCRIPT chart animation plug-in Highcharts Examples

3Highcharts-A powerful charting library application

4Highcharts option configuration detailed documentation

5 Use Highcharts to generate line charts and curve charts

6 Use Highcharts to generate histograms

7 Use Highcharts combined with PHP and Mysql to generate pie charts

8 Use Highcharts to realize the integration of bar chart, pie chart and curve chart into one

9jQuery Timeline Plugin: jQuery Timelinr

10Zclip: Copy page content to clipboard compatible with all browsers

11Highcharts Very practical Javascript statistical chart demo example

12iPictrue: Picture annotation tips

13 Use jquery.qrcode to generate QR code

14 Repair of excess decimal digits bug in Highcharts report plug-in

15 Schedule FullCalendar

16FullCalendar calendar plug-in documentation

17FullCalendar application - reading JSON data

18FullCalendar App - Create a new schedule event

19FullCalendar App - Edit and delete calendar events

20FullCalendar App - Drag and save in real time

21JQuery Highcharts method to dynamically generate charts

22FullCalendar App - Integrating lunar solar terms and festivals

23Highcharts chart library usage tutorial [Highcharts detailed parameter configuration]

24 A brief analysis of jquery’s js chart component highcharts

25 An image lazy loading plug-in implemented using jquery (including image lazy loading principle)

26 Introduction to AMD asynchronous module definition and how to use jQuery and jQuery plug-ins in Require.js

27 Use jquery.upload.js to implement asynchronous upload sample code

28 Examples of using jquery.qrcode to generate color QR codes

29 Use the jquery.validate custom method to implement logical verification of filling in at least one mobile number or landline number

30 Use jQuery.wechat to build WeChat WEB application

31 Use JQ to write the most basic fade-in and fade-out effect with demonstration animation

32 Use jquery menu plug-in HoverTree to imitate Jingdong unlimited menu

33 Use jQuery jqPlot plugin to draw histogram

34SyntaxHighlighter 3.0.83 usage notes

35 date pickers with memo function based on jQuery

36 JavaScript face detection implementation method

37jQuery lazy loading (lazy loading) plug-in – jquery.lazyload.js

38 Method to get the selected node of zTree on the parent page

39 Use jquery component qrcode to generate QR code and application guide

40jQuery Highcharts Line Chart Case Analysis

41 Solution to jquery.uploadify plug-in frequently crashing in chrome browser

42jQuery.Highcharts.js draws histogram pie chart curve chart

43jQuery implements exquisite multi-level drop-down menu effects

44jQuery realizes the animation effect of adding to shopping cart and flying in

45jQuery slidereveal realizes panel sliding side display effect

46PHP mysql Highcharts generates pie chart

47 Detailed explanation of using the JQuery upload plug-in Uploadify in AspNet

Confirmation box using JQuery boxy plug-in in 48AspNet

49 How to use jqchart to display charts after ajax reads the data