【jqPlot】jqPlot饼图

lizhuquan0769

浏览: 48278 次

最近访客更多访客>>

lzg128ty

xx5333

kfjihailong

81383286

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

chart

1）首先引入必须的js和css文件

<link href="<%=contextPath %>/lib/jqplot/jquery.jqplot.css" rel="stylesheet" type="text/css" />  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/jquery.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/jquery.jqplot.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.pieRenderer.min.js"></script>    
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.logAxisRenderer.min.js"></script>    
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>    
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>    
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>    
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>    
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.barRenderer.min.js"></script>    
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.enhancedLegendRenderer.min.js"></script>    
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.highlighter.min.js"></script>    
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.pointLabels.min.js"></script>    
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.cursor.min.js"></script>   
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.dragable.min.js"></script>

2）在body上定义一个div容器

<body>    
   <div id="chartContainer"/>    
</body>

3）饼图

//构造数据  
var date = [['2014-07-01',1],['2014-07-02',2],['2014-07-03',3],['2014-07-04',4],['2014-07-05',5],['2014-07-06',6],['2014-07-07',7]];
//构造饼图chart 
$.jqplot('chartContainer', [date], {  
    title : '饼图',  
    seriesDefaults : {  
        renderer : jQuery.jqplot.PieRenderer, 
        rendererOptions : {  
            animation: {  
                show: true  
           	},
           	fill : false, // 是否把块填充完整
         	showDataLabels : true,  //是否系那是label
         	dataLabelNudge : +62, //label距离中心点的距离
         	dataLabelThreshold : 1, //低于1%的块不显示  
         	sliceMargin : 4, // 块与块之间的外间距
         	lineWidth : 3 // 块的线粗
        }
       
    },  
    legend : {// Date series title  
        show : true,  
        location : 'ne',  
        placement : 'inside',  
        fontSize : '12px',  
        rowSpacing : '1px'  
    },  
    highlighter : {  
        show : true,  
        formatString : '%s',  
        useAxesFormatters : false,  
        tooltipContentEditor : function(str, seriesIndex, pointIndex, plot) {  
            return '<span style="font-size:15px;">' + str + '</span>';  
        }  
    }  
});