- 浏览: 87856 次
- 性别:
- 来自: 厦门
最新评论
-
zhengyong7232:
SELECT t.province,DECODE(landsc ...
列转行 -
meepo3927:
不是特么很懂
列转行
实现一个柱状图,这个柱状图的高度在不停的刷新,效果如下:
官网是没有动态刷新的示例的,由于需要我查看了其源码,并根据之前示例做出了动态柱状图的效果,希望对同学们有用!
同样,绘制这个图需要的也是双维数组,我尝试了几个方法,使用 series.setData(data); 可是实现数据的重新指定!
在highcharts.js文件中你可以查看他的一些方法!
官网是没有动态刷新的示例的,由于需要我查看了其源码,并根据之前示例做出了动态柱状图的效果,希望对同学们有用!
<%@ 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', type: 'column', events: { load: function() { // set up the updating of the chart each second var series = this.series[0]; setInterval(function() { var data = []; data.push(['Apples', Math.random()]); data.push(['Oranges', Math.random()]); data.push(['Pears', Math.random()]); data.push(['Grapes', Math.random()]); data.push(['Bananas', Math.random()]); series.setData(data); }, 2000); } } }, title: { text: '<b>Java小强制作</b>' }, xAxis: { categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] }, yAxis: { min: 0, title: { text: '当前产值' }, stackLabels: { enabled: true, style: { fontWeight: 'bold', color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' } } }, legend: { align: 'right', x: -100, verticalAlign: 'top', y: 20, floating: true, backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white', borderColor: '#CCC', borderWidth: 1, shadow: false }, tooltip: { formatter: function() { return '<b>'+ this.x +'</b><br/>'+ this.series.name +': '+ this.y +'<br/>'+ 'Total: '+ this.point.stackTotal; } }, plotOptions: { column: { stacking: 'normal', dataLabels: { enabled: true, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' } } }, series: [{ name: 'John', data: [5, 3, 4, 7, 2] }] }); }); </script> </head> <body> <div id="container" style="width: 800px;height: 400px"></div> </body> </html>
同样,绘制这个图需要的也是双维数组,我尝试了几个方法,使用 series.setData(data); 可是实现数据的重新指定!
在highcharts.js文件中你可以查看他的一些方法!
发表评论
-
最小生成树之Kruskal算法
2013-12-15 00:54 1071这篇文章实现最小生成树的Kruskal算法Kruskal算 ... -
排序算法--插入排序
2013-12-15 00:47 1043插入排序原理:假设 ... -
poi创建下拉框
2013-04-16 19:01 0package finance.tools.salesper ... -
Spring中Transactional配置
2013-04-11 20:43 985Spring中Transactional配置 标签: 杂谈 分 ... -
Hibernate将Enum枚举类型映射为Int类型 .
2013-04-09 16:46 1513最近要用Hibernate做一个枚举类型的映射,在MySQL ... -
Hibernate 更灵活的用法 HibernateCallback
2013-01-22 14:41 1394在项目中用Hibernate的DetachedCriter ... -
spring源代码分析(2)--BeanFactory
2013-01-20 12:38 1394我们首先来看下BeanFacroty接口 pa ... -
spring源代码分析(1)--Resource的分析
2013-01-20 12:22 4012我们知道,在spring中,配置文件是通过资源形式加载的, ... -
DefaultListableBeanFactory研究
2013-01-18 10:49 5886DefaultSingletonBeanRegistry完 ... -
jvm的内存调优
2013-01-11 15:54 8381) 堆 运行时数 ... -
struts2中Action的name 和package的name和namespace是什么作用
2013-01-02 12:16 9609在struts2的 struts.xml 配置中 例: ... -
深入探索 高效的Java异常处理框架
2012-10-22 14:09 885摘要:本文从Java异常最基本的概念、语法开始讲述了Java异 ... -
JAVA对ArrayList排序
2012-10-16 21:53 16493java如何对ArrayList中对象按照该对象某属性排序 ... -
ThreadPoolExecutor使用和思考(中)-keepAliveTime及拒绝策略
2012-09-11 00:48 937工作中多处接触到了ThreadPoolExecutor。趁着现 ... -
ThreadPoolExecutor使用和思考(上)-线程池大小设置与BlockingQueue的三种实现区别
2012-09-11 00:45 1621工作中多处接触到了ThreadPoolExecutor。趁着现 ... -
Spring IOC之BeanFactory
2012-09-10 12:39 1287BeanFactory ,作为 Spring 基础的 IoC ... -
Java5 并发学习
2012-09-10 11:33 805在Java5之后 ... -
Spring对事务管理的支持的发展历程(基础篇
2012-08-31 17:43 921Connection conn = DataS ... -
CXF ,在Client端用于把 Date 类型转换成 XMLGregorianCalendar .
2012-08-31 16:54 1631import javax.xml.datatype.Datat ... -
《Spring技术内幕》学习笔记10——Web环境中Spring的启动过程
2012-07-30 09:04 9841.Spring 不但可以在 JavaSE 环境中应用,在 W ...
相关推荐
利用highCharts绘制饼图和柱状图
Highcharts柱状图显示,柱状图显示颜色不一样
做数据的图标显示,适合用highcharts.js插件来实现,可以做曲线图、柱状图、面积图等
js画饼状图 柱状图 曲线图,实现中文描述,自定义模块名称,用Highcharts实现饼状图 柱状图 曲线图,可参开Highcharts开发文档
highcharts柱状图
highcharts表格制作柱状图的Demo。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
实现一个柱状图,这个柱状图的高度在不停的刷新,效果如下: 官网是没有动态刷新的示例的,由于需要我查看了其源码,并根据之前示例做出了动态柱状图的效果,希望对同学们有用! 看一下代码: <%@ page ...
解决highcharts多级下钻问题,下钻过程中使用了多种图例,自带上钻功能 c#,java使用方法一样,demo中使用c#方法实现 vs打开直接可以运行无需连接数据库 大数据可使用异步下钻...
highcharts 动态生成柱状图,曲线图,仪表盘图,调用totalReport方法,传入要生成图表的类型 和数据参数 标题等 可以自动生成图
NULL 博文链接:https://xurichusheng.iteye.com/blog/2176892
该项目主要是使用.NET MVC 和Highcharts+Ajax+Json生成动态曲线图,柱状图,饼图,让数据更加的明显美观,可以满足绝多数数据报表的需求!
使用highcharts实现饼图和曲线图的展示
要实现 cpu 利用率动态图,需要使用 HighChartS 库和 Java 语言。首先,需要在 Java 项目中引入 HighChartS 库,然后使用 Java 语言将 cpu 利用率数据传递给 HighChartS 库,最后使用 HighChartS 库将数据渲染成动态...
使用Highcharts实现的图形报表,各种柱形对比图,柱形级别图,单一柱形图,各种功能。
本文实例讲述了jQuery插件HighCharts绘制简单2D柱状图效果。分享给大家供大家参考,具体如下: 1、实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>...
highCharts 柱状图,线型和柱状,仪表, 内有仪表,如果没有请举报。
解决highcharts多级下钻问题,下钻过程中使用了多种图例,自带上钻功能 c#,java使用方法一样,demo中使用c#方法实现 vs打开直接可以运行无需连接数据库 大数据下钻可使用异步加载提升性能
Highcharts 图形报表 线形图 柱状图 各种图形 Highcharts 图形报表 线形图 柱状图 各种图形
主要介绍了jQuery.Highcharts.js绘制柱状图饼状图曲线图的方法,非常的实用,小伙伴们可以直接拿到项目中使用。