素材网 素材网

jQuery图表图形数据统计图包含折线图 饼状图 条状图形等

下载资源()次

阅读次数()次

发布时间:2014-07-23

jQuery图表图形数据统计图包含折线图 饼状图 条状图形等
分享到:

用法简介:

来源:xw素材网

jQuery图表图形数据统计图包含折线图 饼状图 条状图形等。
文件引用:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/exporting.js"></script>
<script type="text/javascript">
	 $(function () {                                                               
    $('#container').highcharts({                                          
        chart: {                                                          
        },                                                                
        title: {                                                          
            text: '折线,饼状,条状综合图'                                     
        },  
		//x轴
        xAxis: {                                                          
            categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
        },                                                                
        tooltip: {                                                        
            formatter: function() {                                       
                var s;                                                    
                if (this.point.name) { // the pie chart                   
                    s = ''+                                               
                        this.point.name +': '+ this.y +' fruits';         
                } else {                                                  
                    s = ''+                                               
                        this.x  +': '+ this.y;                            
                }                                                         
                return s;                                                 
            }                                                             
        },                                                                
        labels: {                                                         
            items: [{                                                     
                html: 'Total fruit consumption',                          
                style: {                                                  
                    left: '40px',                                         
                    top: '8px',                                           
                    color: 'black'                                        
                }                                                         
            }]                                                            
        },                                                                
        series: [{                                                        
            type: 'column',                                               
            name: 'Jane',                                                 
            data: [3, 2, 1, 3, 4]                                         
        }, {                                                              
            type: 'column',                                               
            name: 'John',                                                 
            data: [2, 3, 5, 7, 6]                                         
        }, {                                                              
            type: 'column',                                               
            name: 'Joe',                                                  
            data: [4, 3, 3, 9, 0]                                         
        }, {                                                              
            type: 'spline',                                               
            name: 'Average',                                              
            data: [3, 2.67, 3, 6.33, 3.33],                               
            marker: {                                                     
            	lineWidth: 2,                                               
            	lineColor: Highcharts.getOptions().colors[3],               
            	fillColor: 'white'                                          
            }                                                             
        }, {                                                              
            type: 'pie',                                                  
            name: 'Total consumption',                                    
            data: [{                                                      
                name: 'Jane',                                             
                y: 13,                                                    
                color: Highcharts.getOptions().colors[0] // Jane's color  
            }, {                                                          
                name: 'John',                                             
                y: 23,                                                    
                color: Highcharts.getOptions().colors[1] // John's color  
            }, {                                                          
                name: 'Joe',                                              
                y: 19,                                                    
                color: Highcharts.getOptions().colors[2] // Joe's color   
            }],                                                           
            center: [100, 80],                                            
            size: 100,                                                    
            showInLegend: false,                                          
            dataLabels: {                                                 
                enabled: false                                            
            }                                                             
        }]                                                                
    });                                                                   
});                                                                       				         				
</script>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。