highcharts 高级应用—动态饼图的实现
2015-03-03 17:21
453 查看
如果你已经看了前面的关于曲线和柱状图的实现,饼图你看看效果和代码就行了!
动态柱状图实现
动态曲线实现
效果如下:
直接运行该JSP,你会看到效果,代码如下:
动态柱状图实现
动态曲线实现
效果如下:
直接运行该JSP,你会看到效果,代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html> <head> <title>Highcharts Example</title> <script language="javascript" type="text/javascript" src="jquery.min.js"></script> <script language="javascript" type="text/javascript" src="highcharts.js"></script> <script language="javascript" type="text/javascript" src="exporting.js"></script> <script type="text/javascript"> var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, events: { load: function() { // set up the updating of the chart each second var series = this.series[0]; setInterval(function() { var data = []; data.push(['Firefox', Math.random()]); data.push(['IE', Math.random()]); data.push(['Safari', Math.random()]); data.push(['Opera', Math.random()]); data.push(['Others', Math.random()]); series.setData(data); }, 2000); } } }, title: { text: '<b>Java小强制作</b>' }, 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.8], ['IE', 26.8], ['Safari', 8.5], ['Opera', 6.2], ['Others', 12.7] ] }] }); }); </script> </head> <body> <div id="container" style="width: 800px;height: 400px"></div> </body> </html>
相关文章推荐
- highcharts 高级应用—动态饼图的实现
- highcharts 高级应用—动态柱状图的实现
- highcharts 高级应用—动态柱状图的实现
- highcharts 高级应用—动态曲线的实现
- highcharts 高级应用—动态饼图的实现
- highcharts 高级应用—动态柱状图的实现
- highcharts 高级应用—动态曲线的实现
- highcharts 高级应用—动态曲线的实现
- highcharts 高级应用—动态曲线的实现
- highcharts 高级应用(生成动态曲线)
- Dev系列控件之XtraChart高级应用(模拟flash鼠标移动,点击实现相关信息提示)
- IBATIES 高级应用 动态组合条件
- 在网页上实现实时动态曲线——利用Highcharts控件和JQuery
- Java反射的高级应用,模拟开发环境IDE动态搜索类成员以及方法,。。。。。
- QT脚本在组态软件中实现动态功能的应用
- JavaScript + PHP 应用二:网页设计中树形菜单的动态实现
- C# 高级应用--反射动态调用类的成员范例 !
- java应用(非web应用)中log4j.properties动态修改配置文件,无需重启,就能立即生效,如何实现?
- 用Annotation,Future,动态代理实现自己的JAVA方法运行超时应用
- 【Linux的高级应用编程】Linux下的线程实现机制分析