Highcharts动态实现柱形图

来源：互联网发布：苹果非编软件编辑：程序博客网时间：2024/06/06 01:53

1.认识Highcharts

HighCharts 界面美观，由于使用JavaScript编写，所以不需要像Flash和Java那样需要插件才可以运行，而且运行速度快。最新版本Highcharts-4.2.3.

特点：

          1.兼容性：兼容当今大部分的浏览器，包括Safari、IE和火狐等。
          2.图表类型：包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等。
        3.不受语言约束：支持ASP，PHP，JAVA，.NET等。
          4.提示功能：即将鼠标移动到某个数据点上，可以显示该点的详细数据，并且可以对显示效果进行设置。
          5.导出：表格可导出为 PDF/ PNG/ JPG / SVG 格式。
          6.输出：网页输出图表。
          7.外部数据：从服务器载入动态数据。

2.下载Highcharts-4.2.3

http://v1.hcharts.cn/api/

3.Highcharts的实例

<span style="font-size:14px;"><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script src="/jquery/jquery.min.js"></script>
<script src="/highcharts/highcharts.js"></script>
<script type="text/javascript">
$(function () {
// create the chart
names="";
grades="";
xx="";
yy="";
$.ajax({
url:"<%=request.getContextPath()%>/list",
async:false,
success:function(data){
//对数据进行查询遍历
for ( var i in data) {
var name=data[i].name;
var grade=data[i].grade;
names+=",'"+name+"'";
grades+=","+grade+"";
}
xx = names.substring(1);
xx="["+xx+"]";
yy=grades.substring(1);
yy="["+yy+"]";
aa();
},dataType:"json"
});
});
//highcharts 图表展示
function aa(){
//定制树状图颜色
/* Highcharts.setOptions({
colors:['#8000ff']
}); */
//图表展示容器，与div的id保持一致
$('#container').highcharts({
chart: {
//指定图表的类型，默认是折线图（line）
type:"column",
//定制树状图颜色
backgroundColor: 'white',
events: {
load: function () {
//鼠标附上去后提示信息
var label = this.renderer.label('标题', 100, 120)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
}).css({
color: 'red'
}).add();
setTimeout(function () {
label.fadeOut();
}, 1000);
}
}
},title: {
//指定图表标题
text:'成绩单',
},
//动态获取数据库的名字就是所谓的X轴
xAxis: {
categories: eval(xx),
},
//动态获取数据
series: [{
animation: false,
data: eval(yy),
}],
//Y轴标题
yAxis:{
title:{text:"成绩"}
},
});
}
</script>
<body>
<div id="container" style="min-width:400px;height:400px;"></div>
</body>
</html></span>

阅读全文

0 0