详情可见:
http://www.cnblogs.com/liuhaorain/archive/2012/01/24/2311352.html
1.使用Highcharts需要同时引用jQuery和Hightcharts两个文件。如下:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="/js/highcharts.js" type="text/javascript"></script>
2.在您的网页头部的脚本标签,或在一个单独的js文件,添加JavaScript代码来初始化图表。renderTo参数用来设置图表渲染的位置,一般来说是一个具有ID的DIV元素(参考第3步)。
var chart1; // 全局变量
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
3.在页面中添加一个DIV元素,作为放置Highcharts图表的容器。需要为其设置ID值,与第2步rendTo参数绑定。设置的宽度和高度将作为Highcharts图表的宽度和高度。
<div id="container" style="width: 100%; height: 400px"></div>
4.你可以通过Highcharts.setOptions方法为Highcharts图表设置一个全局的主题(可选的)。下载包含有四个预定义的主题,如果你需要使用从这些主题,只需在 highcharts.js 后引用这些文件。比如:
<script type="text/javascript" src="/js/themes/gray.js"></script>
项目实例:
highcharts中饼图解析的数据格式需如:
['csjk2',1],['csjk',3],['csjk1',5]
后台将列表信息发送到jsp页面
@RequestMapping(params = "method=chart")
public String chart(HttpServletResponse response,HttpServletRequest request,ModelMap modelMap){
List<Interserivice> interserverlist = interseriviceService.getJson();
modelMap.addAttribute("interserverlist", interserverlist);
return "system/interservice_chart";
}
jsp页面中通过java取出并转化成json数据格式
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
List<Interserivice> interserverlist =(List<Interserivice>)request.getAttribute("interserverlist");
JSONArray json = JSONArray.fromObject(interserverlist);
String dataTmp="";
for(int i=0;i<json.size();i++){
JSONObject jsonObject = JSONObject.fromObject(json.get(i));
dataTmp+="['"+jsonObject.getString("CODE")+"',"+jsonObject.getInt("COUNT")+"],";
}
dataTmp=dataTmp.substring(0, dataTmp.length() - 1);
System.out.println(dataTmp);
%>
定义div容器:
<form id="form1" name="form1" method="post">
<div id="container">
</div>
</form>
初始化饼图:
<script type="text/javascript">
$(document).ready(function() {
//颜色渐变
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: {
cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
var options = {
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true
},
title: {
text: '大众文化圈系统接口调用次数饼状图'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ '调用 '+this.point.y +' 次';
//数据格式[this.point.name,this.point.y]
}
}
}
},
series: [
{
type: 'pie',
name: '接口调用比例',
data:
[
//['csjk2',1],['csjk',3],['csjk1',5]
<%=dataTmp %>
]
}
]
}
var chart = new Highcharts.Chart(options);
});
</script>
分享到:
相关推荐
一个页面,两个双饼图,至于双饼图长什么样,自己去官网查看
Highcharts是一个纯JavaScript编写的图表库,它提供了一个将交互式的图表添加到您的网站或Web应用程序的简单方法。 Highcharts目前支持折线图,曲线图,块状图,块状-曲线图,柱形图,条形图,饼图和散点图类型。
前端项目-highcharts,HighCharts是一个用纯JavaScript编写的图表库,为您的网站或Web应用程序添加交互式图表提供了一种简单的方法。海图目前支持线、样条线、面积、面积样条线、列、条形图、饼图和散点图类型。海图...
资源名称:使用Highcharts快速开发报表 中文WORD版内容简介:Highcharts是一个纯Javascript编写的图表库,它提供了一个将交互式的图表添加到您的网站或Web应用程序的简单方法。 Highcharts目前支持折线图,...
Highcharts是一个纯JavaScript编写的图表库,它提供了一个将交互式的图表添加到您的网站或Web应用程序的简单方法。 Highcharts目前支持折线图,曲线图,块状图,块状-曲线图,柱形图,条形图,饼图和散点图类型。
Highcharts可以为您的网站或Web应用程序提供直观,互动式的图表。目前支持线,样条,面积,areaspline,柱形图,条形图,饼图和散点图类型。
Highcharts是一个纯JavaScript编写的图表库,提供直观的,交互式的图表到您的网站或Web应用程序。 Highcharts目前支持线,样条,area,areaspline的,柱形图,条形图,饼图,散点图,棱角分明的仪表,arearange,...
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。下面通过本文的介绍及实例一起来学习学习吧...
Highcharts 试用版 试用版 开发语言: JavaScript/HTML5 可用平台: JSP/ASP.NET/PHP 当前版本: v4 是一款纯HTML5/JavaScript编写的图表库,为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、...
Js图表 jQuery highcharts 动感统计曲线图生成插件,它能以动画形式生成曲线图、柱状图、饼图等许多统计图形,还有一些更复杂的图形highcharts也能帮你完成,确实挺不错的,而且压缩包内收集了很多这方面的应用实例...
Highcharts是一个用纯JavaScript编写的图表库,它提供了一种将交互式图表添加到您的网站或Web应用程序的简便方法。 Highcharts当前支持折线,样条线,面积,面积线,柱状图,条形图,饼图,散点图,角规,arearange...
图表库:图表库是一种常用的数据可视化工具,包括各种图表类型如折线图、柱状图、饼图等,如Matplotlib、D3.js、Highcharts等。 地图可视化:地图可视化是一种常用的数据可视化技术,用于展示地理信息数据,如地图...
信贷鳄鱼 管理债务是la脚的。 信贷鳄鱼很酷。 Credit Croc可以跟踪您的债务,因此您不必这样做! 动机 管理个人财务,尤其是信用卡和银行贷款,可能会感到压力。...Highcharts.com(饼图) Node.js 套餐
一、源码描述 这是一款美观大气的图表分析控件案例演示,采用了Jquery技术,应用的Highchats图表库, 非常适合在项目做数据分析... 该源码主要是通过调用highcharts.js实现了曲线图、柱状图、饼图三种图表样式呈现。
AAInfographics是Kotlin的语言版本这是面向对象的,一组的易于使用,极其高雅图形绘制控制,基于流行的开源前端图表库Highcharts。 这样可以非常快速地向您的移动项目中添加交互式图表。 它支持单点触摸进行数据检查...
AAInfographics是Swift的语言版本这是面向对象的,一组的易于使用,极其高雅图形绘制控制,基于流行的开源前端图表库Highcharts。 这样可以非常快速地向您的移动项目中添加交互式图表。 它支持单点触摸进行数据检查...