使用highcharts生成统计图

  1. 导入核心js类库 :highcharts.js、highcharts.src.js、exporting.js、exporting.src.js
  2. 定义图形展示的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中文网查看案例点击打开链接

你可能感兴趣的:(报表,highchart)