使用highcharts生成统计图

旧城等待， 2022-08-13 11:52 180阅读 0赞

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中文网查看案例[点击打开链接][Link 1]

[Link 1]: http://www.hcharts.cn/