<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="gb2312" />
<title>饼图-例子</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<script src="js/exporting.js" type="text/javascript"></script>
<script type="text/javascript">
var chart;
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
{
name: 'IE',
y: 26.8,
sliced: true,
selected: true
},
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
function getForm(){
//var data = ["['Firefox',45.0]","[{name: 'Chrome',y: 26.8,sliced: true,selected: true}]","['IE',12.8]","['Safari',8.5]","['Opera',6.2]","['Others',0.7]"];
//var data = "[{'Firefox',45.0},{'Chrome',26.8},{'IE',12.8},{'Safari',8.5},{'Opera',6.2},{'Others',0.7}]";
var data = [['Firefox',45.0],{name: 'Chrome',y: 26.8,sliced: true,selected: true},['IE',12.8],['Safari',8.5],['Opera',6.2],['Others',0.7]];
chart.series[0].setData(data);
chart.redraw();
}
$(document).ready(function() {
//每隔3秒自动调用方法,实现图表的实时更新
// window.setInterval(getForm,3000);
getForm();
});
});
</script>
</head>
<body>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto ;border:1px #000000 solid;"></div>
</body>
</html>
分享到:
相关推荐
实现一个简单ajax+jquery+highcharts+json例子,主要让初学者了解ajax+jquery是怎么接受后台传过来的json数据,并显示到前台highcharts中的,以及js文件应该如何放置等问题。
Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图 后台代码大家根据自己的情况写并转JSON格式。在前台修改url,即可出柱形图
Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载
文件仅有两个文件,一个是HighCharts做的曲线图标htm,使用JQuery Ajax接收JSON字符串,后台使用java HttpServeltResponse json, out.write("....");此例运行需要官方的js demo包,部分java方法代码如下涵盖两条曲线,str...
使用ajax获取highcharts所需的数据,小程序仅供参考。
统计图的字段个数可以动态添加。使用的是json字符串绑定。供参考
网上的资源将的都很笼统也不全面,我也是在学习这些东西,把自己写的稍微整合了一下,应该时候新手看,能够完全运行,只要自己附加...Jquery中easyui的运用,ajax后台数据的传输,Json的拼接,highcharts获取后台数据!
ext3.0+highcharts+ext时间日期控件+jquery+json
Highcharts 的数据是 JavaScript 数组或对象,这些数据可以是本地的配置对象,独立的数据文件(JSON、CVS)甚至是不同的网站上定义。另外,这些数据可以用任何形式处理好并加载到 Highcharts 中。 gauges仪表图 ...
结合 jQuery 的 ajax 功能,可以做到实时刷新数据、用户手动修改数据等功能,结合事件处理,可以做到各种交互功能。 范围选择器 在处理大数据集时,我们可能需要查看不同时间范围的数据。Highstock 提供了范围选择...
结合 jQuery 的 ajax 功能,可以做到实时刷新数据、用户手动修改数据等功能,结合事件处理,可以做到各种交互功能。 范围选择器 在处理大数据集时,我们可能需要查看不同时间范围的数据。Highstock 提供了范围选择...
Highcharts (非开源,商业收费)是一个用纯JavaScript编写的一个图表库(需要jquery支持), 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用,商业...
1、前端技术 JS框架:jquery-2.1.1、Bootstrap.js、JQuery UI CSS框架:Bootstrap v3.3.4(稳定是后台,UI方面根据需求自己升级改造吧)。...工具类:NPOI、Newtonsoft.Json、验证码、丰富公共类似
Highcharts (非开源,商业收费)是一个用纯JavaScript编写的一个图表库(需要jquery支持), 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用,商业...
框架使用场景:OA、ERP、BPM、CRM、WMS、TMS、MIS等业务管理系统及后台系统 框架主要运用技术: 1、前端技术 JS框架:jquery-2.1.1、Bootstrap.js、JQuery UI ...工具类:NPOI、Newtonsoft.Json、验证码、丰富公共类似
纯JS的图表插件,效果非常绚丽。只要提供JSON数据,JS自动生成图表,柱状、曲线图、饼图等。
框架使用场景:OA、ERP、BPM、CRM、WMS、TMS、MIS等业务管理系统及后台系统 框架功能: 1.系统管理 机构管理、角色管理、岗位管理、用户管理、数据字典、...•工具类:NPOI、Newtonsoft.Json、验证码、丰富公共类似
通过 jquery getJson 获取数据: $.getJSON(' ', {'sessionid' : $.cookie('sessionCookie')}, function(data) { // do stuff }); 检查 js/app.js 以查看此内容。 链接需要指向backend.jar/endpoint路径 角度路由 ...
Highcharts 配置语法 本章节我们将为大家介绍使用 Highcharts 生成图表的一些配置。 ...创建一个 HTML 页面,引入 jQuery 和 Highcharts 库: ...Highcharts 库使用 json 格式来配置。 $('#container').highch
Java 教程 JavaScript 参考⼿册 Javascript 教程 jQuery EasyUI 教程 jQuery Mobile 教程 jQuery UI 教程 jQuery 教程 JSON 教程 JSP 教程 Linux 教程 Lua 教程 Memcached 教程 MongoDB 教程 MySQL 教程 Node.js ...