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数据库获取数据动态生成柱状图?效果大概是这样的,如图: 请问大侠这个这么实现呢?
随机推荐
- java语言环境jdk的安装和环境变量的配置
一.jdk的安装 我安装的为64位的1.7.0_17版本的jdk,双击运行,全部默认下一步就行 此处可整改安装目录,然后点击下一步进行安装. 二.环境变量的配置 1.右键点击我的电脑à点击属性,出现如 ...
- EOS 上线前，先搞懂这两个基本概念
如果你曾经尝试在本地运行 EOS 测试节点,会发现编译.运行并不是特别复杂,但官方教程里两个概念很容易把人搞晕: Account(账户)和 Wallet (钱包). EOS 的 Wallet 跟其他区 ...
- Y2K问题
关于第五章 团队和流程 2.6 特工团队中所提到的Y2K问题,第一次接触到这个名词去百度了,它的意思是这样的:year 2K problem,又称千年虫问题.主要原因是早期的软件大多以两位数字来记录年 ...
- 求第k小的元素
用快排解决: 用快排,一趟排序后,根据基准值来缩小问题规模.基准值的下角标i 加1 表示了基准值在数组中第几小.如果k<i+1,那就在左半边找:如果k>i+1那就在右半边找.当基准值的下角 ...
- Angular组件——父子组件通讯
Angular组件间通讯 组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件 ...
- webpack安装入门
这两天心血来潮,突然想研究下webpack,花了一天时间,看网上有很多教程,不过发现安装的都是比较老的版本.后来发现还是我太年轻了,找技术播客还不如找官方网站.下面是一个webpack的官方网站,里面 ...
- 源码实现 --> strcpy
拷贝字符串到目标字符串 函数 char *strcpy(char *strDestination, const char *strSource); 复制源串strSource到目标串strDestin ...
- Algorithm --> KMP算法
KMP算法 一.传统字符串匹配算法 /* * 从s中第sIndex位置开始匹配p * 若匹配成功,返回s中模式串p的起始index * 若匹配失败,返回-1 */ ) { ; || p.length( ...
- 实现Windows程序的数据的绑定
1.创建DataSet对象 语法: DataSet 数据集对象 =new DataSet("数据集的名称字符串"); 语法中的参数是数据集的名称字符串,可以有,也可以没有.如 ...
- git解决修改代码后无法push的问题failed to push some refs to 'ssh://git@xxx.xxx.xx/xx.git'
今天在使用git提交代码的时候,犯了个很低级的错误,按照一切流程当我add并commit提交代码,最后使用push到远程仓库, 接下来奇怪的事情发生了,push之后,查看远程仓库代码并没有发现提交记录 ...