highchart
highchart
|
1
2
|
#下载https://www.highcharts.com/download |
a. 简单例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body> <div id="container" style="width: 800px;height: 400px"> </div>
<script src="/static/jquery-3.2.1.js"></script>
<script src="/static/Highcharts-5.0.12/code/highcharts.js"></script>
<script >
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart = new Highcharts.Chart('container',{
title:{
text:"highcharts demo",
},
xAxis:{
categories:["周一","周二","周三"]
},
yAxis:{
title:{
text:"desciption"
}
},
series:[{
name:"beijing",
data:[7.0,6.9,9.5]
},{
name:"shanghai",
data:[-0.2,0.8,5.7]
}]
}); </script> </body>
</html>
b. 改变提示框属性,新增一条线,原来线动态增加点(x轴固定)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body> <div id="container" style="width: 800px;height: 400px"> </div>
<script src="/static/jquery-3.2.1.js"></script>
<script src="/static/Highcharts-5.0.12/code/highcharts.js"></script>
<script >
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart = new Highcharts.Chart('container',{
title: {
text: "<a href='http://www.baidu.com'>test</a>标题",
useHTML: true,
x:20, //移动的位置
style: { //设置字体样式
color: '#ff0000',
fontSize: '12px',
fontWeight: 'blod',
fontFamily: "Courier new"
}
},
subtitle:{
text:"副标题",
align:"right", //位置
},
chart: {
events: {
load: function (e) {
// 图标加载时，执行的函数or去后台取数据
}
}
},
credits: { //右下角广告
enable: true,
position: {
align: 'right',
verticalAlign: 'bottom'
},
text: '老男孩',
href: 'http://www.oldboyedu.com'
},
// tooltip: { //Tooltip用于设置当鼠标滑向数据点时显示的提示框信息
// backgroundColor: '#FCFFC5', //背景颜色
// borderColor: 'red', //边框颜色
// borderRadius: 10, //边框圆角
// borderWidth:3,
// shadow: true, //是否显示阴影
// animation: true, //是否启用动画效果
// style: {
// color: 'ff0000',
// fontSize: '12px',
// fontWeight: 'blod',
// fontFamily: "Courier new"
// }
// },
tooltip: { //源码自定义
pointFormatter: function (e) {
var tpl = '<span style="color:' + this.series.color + '">●</span> ' + this.series.name + ': <b>' + this.y + '个</b><br/>';
return tpl;
},
useHTML: true
},
plotOptions: { //点击触发的事件
series: {
cursor: 'pointer',
events: {
click: function (event) {
// 点击某个指定点时，执行的事件
console.log(this.name, event.point.x, event.point.y);
}
}
}
}, xAxis:{
categories:["周一","周二","周三"]
},
yAxis:{
title:{
text:"desciption"
}
},
series:[{
name:"beijing",
data:[7.0,6.9,9.5],
lineWidth:5 //加粗
},{
name:"shanghai",
data:[-0.2,0.8,5.7]
}]
}); // chart.addSeries({name:'henan',data: [2.0,5.5,9.5]}); //新增加一条线,不常用
// 参数：数值；是否重绘; isShift; 是否动画
// chart.series[0].addPoint(6); //其中一条线延长 </script> </body>
</html>
c. 动态增加值
|
1
|
console里增加 chart.series[0].addPoint([1501689835377.358, 15.9]) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body> <div id="container" style="width: 800px;height: 400px"> </div>
<script src="/static/jquery-3.2.1.js"></script>
<script src="/static/Highcharts-5.0.12/code/highcharts.js"></script>
<script >
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart = new Highcharts.Chart('container',{
title: {
text: "<a href='http://www.baidu.com'>test</a>标题",
useHTML: true,
x:20, //移动的位置
style: { //设置字体样式
color: '#ff0000',
fontSize: '12px',
fontWeight: 'blod',
fontFamily: "Courier new"
}
},
subtitle:{
text:"副标题",
align:"right", //位置
},
chart: {
events: {
load: function (e) {
// 图标加载时，执行的函数or去后台取数据
}
}
},
credits: { //右下角广告
enable: true,
position: {
align: 'right',
verticalAlign: 'bottom'
},
text: '老男孩',
href: 'http://www.oldboyedu.com'
},
// tooltip: { //Tooltip用于设置当鼠标滑向数据点时显示的提示框信息
// backgroundColor: '#FCFFC5', //背景颜色
// borderColor: 'red', //边框颜色
// borderRadius: 10, //边框圆角
// borderWidth:3,
// shadow: true, //是否显示阴影
// animation: true, //是否启用动画效果
// style: {
// color: 'ff0000',
// fontSize: '12px',
// fontWeight: 'blod',
// fontFamily: "Courier new"
// }
// },
tooltip: { //源码自定义
pointFormatter: function (e) {
var tpl = '<span style="color:' + this.series.color + '">●</span> ' + this.series.name + ': <b>' + this.y + '个</b><br/>';
return tpl;
},
useHTML: true
},
plotOptions: { //点击触发的事件
series: {
cursor: 'pointer',
events: {
click: function (event) {
// 点击某个指定点时，执行的事件
console.log(this.name, event.point.x, event.point.y);
}
}
}
}, xAxis:{
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.value);
},
rotation: 30
}
},
yAxis:{
title:{
text:"desciption"
}
},
series:[{
name:"beijing",
data:[7.0,6.9,9.5],
data: [
[1501689804077.358, 8.0],
[1501689814177.358, 6.9],
[1501689824277.358, 16.9],
[1501689834377.358, 11.9]
]
},{
name:"shanghai",
data: [
[1501689804077.358, 12.0],
[1501689814177.358, 10.9],
[1501689824277.358, 5.9],
[1501689834377.358, 6.9]
]
}]
}); // chart.addSeries({name:'henan',data: [2.0,5.5,9.5]}); //新增加一条线,不常用
// 参数：数值；是否重绘; isShift; 是否动画
// chart.series[0].addPoint(6); //其中一条线延长 </script> </body>
</html>
highchart的更多相关文章
- Highchart插件下载与安装
提供完整的 Highcharts 资源包,包含实例文件.所有的 js 压缩版及源码.导出服务器文件等. 1.资源包的使用: 2.开放的CDN:http://img.hcharts.cn/ 二.High ...
- Highchart插件简介和引入方式
一.Highchart简介: Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表. Highchart ...
- 进一步封装highchart，打造自己的图表插件：jHighChart.js
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表.支持的图表类型有曲线图.区域图.柱状图.饼状图.散状点图和综合 ...
- HighChart报表之饼图
个人认为HighChart做报表还是很不错的,从报表的样式还是性能都是很不错的选择. 1.新建一个html页面,命名为:ReportTest.html <script type="te ...
- highcharts去掉右下角highchart.com和右上角的图标(三个小横杆)
去除右下角highchart.com credits: { enabled:false } 去除右上角图标 exporting: { ...
- highchart访问一次后台服务返回多张图表数据
本文承接上一篇,我们制作动态图表的时候,往往需要的不止一张图表,如果每张图表都与服务接口做一次交互的话未免太过频繁,这无论对前后还是后台都是一种压力,本文介绍一种一次访问返回多组数据的方式来减少前台与 ...
- highchart 动态刷新（可用于制作股票时时走势）
最近项目中要求获取时时的cpu动态图,利用 highchart 可以轻松实现该功能,效果可在此地址查看:动态效果 代码如下: 页面 js 引用: <script src="你项目js的 ...
- 使用 highchart 绘制柱状图的通用方法与接口
本文给出使用 highchart 绘制柱状图的通用方法与接口, 只要指定相应的数据结构和配置, 就可以直接拿来使用. 一. 数据结构与基本接口 一般绘制图形, 会涉及到较复杂的数据结构, 比如使 ...
- highchart.js的使用
highchart.js是一个很实用的图表插件,涵盖柱状图.曲线图,区域图.3D图.饼图.散列图.混合图等等,功能很强大. 首先去官网下载最新版highchart.js插件,中文网地址:http:// ...
- 如何用asp.net MVC框架、highChart库从sql server数据库获取数据动态生成柱状图
如何用asp.net MVC框架.highChart库从sql server数据库获取数据动态生成柱状图?效果大概是这样的,如图: 请问大侠这个这么实现呢?
随机推荐
- 掌握这些知识，你的python水平能更上一层楼（续）
笔者的上一篇python文章阅读量不错,看来python爱好者很多,所以再写一篇,以飨读者. 先接着上一篇讲一个问题,下面这段code有没有问题? def countcalls(func): coun ...
- POJ-1256 next_permutation函数应用
字典序列: 在字典序中蕴含着一个点,就是大小的问题,谁先出现,谁后出现的问题.譬如a<b<c,出现顺序就是a,b,c. 本题中字符集是所有大小写字母,而题目中规定的谁大谁小已经不是按asc ...
- MySQL 中添加列、修改列以及删除列
ALTER TABLE:添加,修改,删除表的列,约束等表的定义. 查看列:desc 表名; 修改表名:alter table t_book rename to bbb; 添加列:); 删除列:alte ...
- Redis的安装和部署
基本知识 1.Redis的数据类型: 字符串.列表(lists).集合(sets).有序集合(sorts sets).哈希表(hashs) 2.Redis和memcache相比的独特之处: (1)re ...
- linux No space left on device 由索引节点(inode)爆满引发500问题
inode是什么? 理解inode,要从文件储存说起. 文件储存在硬盘上,硬盘的最小存储单位叫做"扇区"(Sector).每个扇区储存512字节(相当于0.5KB). 操作系统读取 ...
- JavaWeb学习笔记八 监听器
监听器Listener jservlet规范包括三个技术点:servlet :listener :filter:监听器就是监听某个对象的的状态变化的组件.监听器的相关概念事件源: 被监听的对象(三个域 ...
- vue计算属性详解——小白速会
一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...
- HIVE使用mysql作为外置数据库配置详情
Hive安装配置(mysql) 安装mysql hadoop$:sudo apt-get update hadoop$:sudo apt-get install mysql-server 启动mysq ...
- 20162318 实验三《 敏捷开发与XP实践》实验报告
北京电子科技学院(BESTI) 实 验 报 告 课程:程序设计与数据结构 班级:1623班 姓名:张泰毓 指导老师:娄老师.王老师 实验日期:2017年5月12日 实验密级:非密级 实验器材:带Lin ...
- Flask 扩展 HTTP认证
Restful API不保存状态,无法依赖Cookie及Session来保存用户信息,自然也无法使用Flask-Login扩展来实现用户认证.所以这里,我们就要介绍另一个扩展,Flask-HTTPAu ...