JS highcharts动态柱状图原理及实现
实现一个柱状图，这个柱状图的高度在不停的刷新，效果如下：
官网是没有动态刷新的示例的，由于需要我查看了其源码，并根据之前示例做出了动态柱状图的效果，希望对同学们有用！
看一下代码：
<%@ 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); 可是实现数据的重新指定！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Javascript highcharts 饼图显示数量和百分比实例代码
Javascript highcharts 饼图显示数量和百分比实例代码 最近公司项目需求有这样一个功能模块,highcharts 饼图显示数量和百分比 ,由于本人刚入门,看到这个需求不会写,于是就上网搜下相关资料,觉得一篇还不错记录下. <div class="piecleft" id="chart" style="height:350px; width: 350px;"> </div> <script type=
-
JS highcharts实现动态曲线代码示例
Highcharts是一个制作图表的纯Javascript类库, 主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用户完全免费: 纯JS,无BS: 支持大部分的图表类型:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图.散布图: 跨语言:不管是PHP..net还是Java都可以使用,它只需要三个文件:一个是 Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools
-
Highcharts＋NodeJS搭建数据可视化平台示例
前一段时间完成了一个数据可视化项目,由后台NodeJS+Highcharts框架进行搭建.下面分享一下整个开发过程的流程,以及使用Highcharts框架的经验. 一.数据的读取 由于数据库使用的是MySQL数据库,在NodeJS中,可以使用NodeJS中的mysql模块进行mysql数据库的相关操作,通过npm安装即可. 1.数据库基本配置 为了方便,我们最好先进行一个数据库连接的基本配置,mysql模块需要的配置信息如下: var connection = mysql.createConne
-
highcharts.js数据绑定方式代码实例
这篇文章主要介绍了highcharts.js数据绑定方式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一,我们先来看看异步加载数据的写法(这是使用MVC的例子) 1 js写法 <script src="~/Scripts/jquery-2.1.4.min.js"></script> <script src="~/Scripts/highcharts.js"></s
-
html+js+highcharts绘制圆饼图表的简单实例
实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type&q
-
纯JAVASCRIPT图表动画插件Highcharts Examples
What is Highcharts? 下载地址 http://www.jb51.net/jiaoben/24363.htmlHighcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spl
-
Highcharts 非常实用的Javascript统计图demo示例
Highcharts 官网:http://www.highcharts.com Highcharts 官网示例:http://www.highcharts.com/demo/ Highcharts 官网文档:http://www.highcharts.com/documentation/how-to-use 官网实例中给出了各式各样的demo,可以参照document修改自己需要的即可. 下面是一个学生成绩走势demo: 复制代码 代码如下: <!DOCTYPE HTML> <htm
-
jQuery.Highcharts.js绘制柱状图饼状图曲线图
在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.Highcharts可以轻松实现三图合一的效果. 复制代码 代码如下: var chart; $(document).ready(function() { chart = new Highcharts.Chart({ c
-
浅析jquery的js图表组件highcharts
Highcharts是一个制作图表的纯Javascript类库, 主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对于非商用用户免费(包括个人网站.非盈利性组织.学生团体等). 纯JS,无BS: 支持大部分的图表类型:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图.散布图: 跨语言:不管是PHP..net还是Java都可以使用,它只需要三个文件:一个是 Highcharts的核心文件highcharts.js,还有a canvas emulator for
-
JS highcharts动态柱状图原理及实现
实现一个柱状图,这个柱状图的高度在不停的刷新,效果如下: 官网是没有动态刷新的示例的,由于需要我查看了其源码,并根据之前示例做出了动态柱状图的效果,希望对同学们有用! 看一下代码: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html> <head> <title>Highcharts Example&l
-
Vue.js+HighCharts实现动态请求展示时序数据
本文实例为大家分享了Vue.js+HighCharts实现动态请求展示时序数据的具体代码,供大家参考,具体内容如下 <template> <el-container> <el-header> <el-menu :default-active="activeIndex" class="el-menu-header" mode="horizontal" @select="ha
-
PHP实现动态柱状图改进版
本文实例分析了PHP实现动态柱状图的改进版.分享给大家供大家参考.具体分析如下: 前面已经写过如果只做动态柱状图的情况,其实原理还是很简单的.因为昨天下午有新的需求,今天上午又修改了一番,并将数据根据编号不同分割显示在表中. 下面把代码粘出来,方便以后自己查看,思路只是一时的火花,今天我想出来这么做,不一定下次还能想得到,也不用费劲的去想,所以写成笔记是比较好的形式. <!DOCTYPE html> <?php // 计算上一个月的今天 function last_month_today
-
基于 D3.js 绘制动态进度条的实例详解
D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的.如果你不知道什么是 JavaScript ,请先学习一下 JavaScript,推荐阮一峰老师的教程. JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼.D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度.由于
-
PHP动态柱状图实现方法
本文实例讲述了PHP动态柱状图实现方法.分享给大家供大家参考.具体分析如下: 1.需求 查询最近一个月的数据总条数和审核通过的条数,做成柱状图 2.实现代码: <!DOCTYPE html> <?php //计算上一个月的今天 function last_month_today($time){ $last_month_time = mktime(date("G", $time), date("i", $time),date("s"
-
JS画布动态实现黑客帝国背景效果
本文实例为大家分享了JS画布动态实现黑客帝国背景效果的具体代码,供大家参考,具体内容如下 效果图 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
-
一文快速弄懂webpack动态import原理
目录 前言 例子 1. 模块加载 2. jsonp动态加载script 3. 执行异步脚本 4. webpackJsonpCallback 5. 执行异步模块代码 流程图 总结 前言 在vue中我们经常用到动态导入页面组件,那么它是如何实现的呢,本文将通过简单的案例,快速了解实现原理 例子 // index.js import('./test').then(fn => { console.log(fn.default()); }) // test.js export default functi
-
基于JS实现动态跟随特效的示例代码
目录 演示 技术栈 源码 css部分 js部分 演示 技术栈 这次用到了关于css的一些功能,和jQuery. CSS3中添加的新属性animation是用来为元素实现动画效果的,但是animation无法单独担当起实现动画的效果.承载动画的另一个属性——@keyframes.使用的时候为了兼容可加上-webkit-.-o-.-ms-.-moz-.-khtml-等前缀以适应不同的浏览器. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 通过 @keyframes 规则,您能够创建动
-
Vue.js Ajax动态参数与列表显示实现方法
Vue.js简介 vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 一.动态参数显示 ajax异步请求后,接收到返回的data参数并显示在前端 1.1 引入js,也加入了jQuery <script type="text/javascript" src="/js/vue.min.js"></script> <script type="text/javascript&
-
JS实现动态移动层及拖动浮层关闭的方法
本文实例讲述了JS实现动态移动层及拖动浮层关闭的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>动态移动的层</title> <body bgcolor="#ADBAC9"> <div id="div1" class="yellow" style="VISIBILITY:visible ; background-color:#FF