使用highcharts生成统计图

最新推荐文章于 2020-05-26 13:04:56 发布

咩咩文

最新推荐文章于 2020-05-26 13:04:56 发布

阅读量992

点赞数

分类专栏： java报表开发文章标签：报表 highchart

本文链接：https://blog.csdn.net/u011659172/article/details/40346427

版权

java报表开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

导入核心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中文网查看案例点击打开链接