jqplot 饼图

 1 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>

 2 

 3 <link href="jquery.jqplot.css" rel="stylesheet" type="text/css" />

 4 

 5 <script src="jquery.jqplot.js" type="text/javascript"></script>

 6 

 7 <script src="jqplot.barRenderer.js" type="text/javascript"></script>

 8 

 9 <script src="jqplot.categoryAxisRenderer.js" type="text/javascript"></script>

10 

11 <script src="jqplot.pointLabels.js" type="text/javascript"></script>

12 

13 <script src="jqplot.pieRenderer.js" type="text/javascript"></script>

14 

15 

16 

17  

18 

19   <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->

20 

21 <script type="text/javascript">

22 

23     $(document).ready(function(){

24 

25     var data = [['苹果', 20],['香蕉', 24],['雪梨', 16],['橘子', 28],['葡萄', 7],['荔枝', 5]];

26 

27      var pie = $.jqplot('chart2', [data], {

28 

29      title: '统计饼图',

30 

31        seriesColors: [ "#579575", "#d8b83f", "#ff5800", "#0085cc","#4bb2c5", "#c5b47f", "#EAA228"],

32 

33          series:[{

34 

35              renderer: $.jqplot.PieRenderer,

36 

37              rendererOptions: {

38 

39            diameter: 250,//饼图的直径

40 

41              sliceMargin: 1,//饼的每个部分之间的距离

42 

43              showDataLabels: true,

44 

45              dataLabelNudge: 35,

46 

47            lineWidth: 5 //设置 饼 块的边框宽度

48 

49              }

50 

51          }],

52 

53          legend: {

54 

55              show: true

56 

57          }

58 

59      });

60 

61  });

62 

63     </script>

64 

65 <body>

66 

67 <div id="chart2" style="height:340px; width:500px;"></div>

68 

69 </body>

这是一个小demo,方便查资料,其中的data,后台传过来是这个格式就可以显示,ok,完成!

你可能感兴趣的:(jqplot)