您的位置：首页 > 其它

使用highcharts生成统计图

2014-10-21 16:15 363 查看
导入核心js类库 :highcharts.js、highcharts.src.js、exporting.js、exporting.src.js
定义图形展示的div：
<!doctype html><html lang="en"><head>  <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script></head><body>  <div id="container" style="min-width:700px;height:400px"></div></body></html><pre name="code" class="plain">



4.编写展示图形数据的js:
//创建组合图表对象
function createBar(categories, datas,id,titles,yTitle,tooltipTitle) {
new Highcharts.Chart({
//创建对象
chart : {
renderTo : id, // 放置图表的DIV容器对应的id属性
/*type : 'column',//定义报表类型
*/			height:480,
/* margin: [ 100, 100, 100, 100]*/
},
//标题
title : {
text : titles,
style : {
color : '#000',
fontSize : '20px',
}
},
//X轴
xAxis : {
categories : categories,//获取X轴名字
/*tickWidth:1,//刻度的宽度
lineWidth :1,//自定义x轴宽度
*/			/*lineColor: '#197F07',//设置X轴颜色  */
//tickPixelInterval:10 ,//决定着横坐标的密度
//tickLength:5,
//tickWidth:5,
labels : {
//step:2,//设置间隔显示
align : 'center',
color : '#000000',
style : {
fontSize : '13px',
fontFamily : 'Verdana, sans-serif',
}
}

},
//设置柱的宽度
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
pointWidth: 70
}
},
//Y轴
yAxis : {
min : 0,
title : {
text : yTitle,
},
},
//设置版本信息
credits : {
enabled : false
},
//图例
legend : {
enabled : false
},
//导出统计图
exporting : {
filename : titles,
enabled : true
},
//提示框
tooltip : {
formatter : function() {
return tooltipTitle + this.y + '元';
}
},
//数据列
series: [{
type: 'column',//柱状图
name: '柱状图',
data: datas
}, {
type: 'spline', //折线图
name: '折线图',
data: datas,
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
});
}



/**
* 根据传入的类型生成图形
* @param type 类型
* @param categories x轴
* @param charsdata 数据
* @param titles 标题
* @param id divID
*/
function createCurveGraphic(type,categories,charsdata,titles,id){
new Highcharts.Chart({
//创建对象
chart: {
renderTo : id, // 放置图表的DIV容器对应的id属性
type: ''+type+''
//            margin: [ 100, 100, 100, 100]
},
//标题
title: {
text: titles,
x: -20
},
subtitle: {
text: 'Source: cdsf.com',
x: -20
},
xAxis: {
//        	maxZoom:3600000,
categories: categories,
//            tickWidth: 1,//设置X轴坐标点是否出现占位及其宽度
tickInterval:(Math.round(categories.length/10) ),//设置横坐标密度
//            maxZoom: 14 * 24 * 3600000, // fourteen days
},
yAxis: {
title: {
text: 'numerical value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: charsdata
});
};


如果你想详细的了解highchart生成不同图形的一些方法,请到highcart中文网查看案例点击打开链接
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航