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数据库获取数据动态生成柱状图?效果大概是这样的,如图: 请问大侠这个这么实现呢?
随机推荐
- 部署wcf出现的问题与解决方法
我将本机作为服务器开发时,没出什么问题,将wcf服务端寄缩到另一台电脑上时,出现了一些问题,这里总结下: 1.wcf服务器和另一个网站应用出问题 服务器的iis上有一个网站应用,当我将wcf服务寄缩到 ...
- 20165226 预备作业3 Linux安装及学习
20165226 预备作业3 Linux安装及学习 Linux安装 一.下载安装VirtualBox 1.首先在官网下载,点开基于VirtualBox虚拟机安装Ubuntu图文教程 找到版本进行下载安 ...
- 1-4 criteria用法大全
Criteria的完整用法 QBE (Query By Example) Criteria cri = session.createCriteria(Student.class); cri.add(E ...
- 关于html文档的规范
1. <!DOCTYPE html> 告诉浏览器该文档使用哪种html或xhtml的规范 2. 元数据中的X-UA-Compatible <meta http-equiv=" ...
- 前端touch事件方向的判断
移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
- Intellij idea操作maven时控制台中文乱码
只留存记录 windows环境下,Intellij idea12中maven操作时,控制台中文乱码问题(编译报错或者clean install时出现的其他错误描述乱码) 在cmd中mvn中文正常显示, ...
- ArrayList 源码分析
ArrayList 源码分析 1. 结构 首先我们需要对 ArrayList 有一个大致的了解就从结构来看看吧. 1. 继承 该类继承自 AbstractList 这个比较好说 2. 实现 这 ...
- 【Python】 用户图形界面GUI wxpython III 更多组件
wxpython - 更多组件 我写到的这些组件可能一来不是很详细,二来不是最全的,想要更好地用这些组件,应该还是去看看教程和别的示例.比较简单的,推荐http://download.csdn.net ...
- USACO Humble Numbers
USACO Humble Numbers 这题主要是两种做法,第一种是比较常(jian)规(dan)的-------------用pq(priority_queue)维护,每次取堆中最小值(小根堆) ...
- SQL中哪些情况会引起全表扫描
1.模糊查询效率很低:原因:like本身效率就比较低,应该尽量避免查询条件使用like:对于like '%...%'(全模糊)这样的条件,是无法使用索引的,全表扫描自然效率很低:另外,由于匹配算法的关 ...