插件使用-HighChart
一、介绍
让数据可视化更简单，兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库。
官网（英）：https://www.highcharts.com/download
官网（中）：https://www.hcharts.cn/
二、使用
0、官网demo
官网-在线实例-Highcharts演示-选择例子-运行结果/js代码/html代码
1、例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="container" style="width: 800px;height: 400px;margin:0 auto;"> <script src="/static/Highcharts-6.0.7/code/highcharts.js"></script>
<script >
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart = new Highcharts.Chart('container',{
title:{
text:"highcharts 标题",
},
xAxis:{ // x轴元素
categories:["周一","周二","周三"]
},
yAxis:{ // y轴标题
title:{
text:"y轴标题"
}
},
series:[{
name:"beijing", // 图1标题
data:[7.0,6.9,9.5] // 数据
},{
name:"shanghai", // 图2标题
data:[-0.2,0.8,5.7] // 数据
}]
}); </script>
</body>
</html>
chart.html
2、例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body> <div id="container" style="width: 800px;height: 400px;margin:0 auto;"> </div>
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/Highcharts-6.0.7/code/highcharts.js"></script>
<script >
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart = new Highcharts.Chart('container',{
title: {
text: "<a href='http://www.baidu.com'>连接</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: 'left',
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>
chart.html
3、例3，动态增加值
在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;margin:0 auto;"> </div>
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/Highcharts-6.0.7/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>
chart.html
以上内容是验证cobila后post上来的。
插件使用-HighChart的更多相关文章
- Highchart插件简介和引入方式
一.Highchart简介: Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表. Highchart ...
- 进一步封装highchart，打造自己的图表插件：jHighChart.js
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表.支持的图表类型有曲线图.区域图.柱状图.饼状图.散状点图和综合 ...
- Highchart插件下载与安装
提供完整的 Highcharts 资源包,包含实例文件.所有的 js 压缩版及源码.导出服务器文件等. 1.资源包的使用: 2.开放的CDN:http://img.hcharts.cn/ 二.High ...
- 13个JavaScript图表（JS图表）图形绘制插件【转】
现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容 ...
- js组件在线编辑器插件、图表库插件、文件树插件
在线编辑器插件: 一.kindeditor 二.UEditor 图表库插件: 一.echart 二.highchart 文件树插件: 一.zTree -- jQuery 树插件 http://www. ...
- highcharts插件使用总结和开发中遇到的问题及解决办法
这里使用的highchart是2014-01-09从官网下载的版本,版本号是3.0.8, 当过了几天后,发现版本号变成了3.0.9,不由得的感叹highchart的版本更新之快. 在jsp中使用hig ...
- highchart.js的使用
highchart.js是一个很实用的图表插件,涵盖柱状图.曲线图,区域图.3D图.饼图.散列图.混合图等等,功能很强大. 首先去官网下载最新版highchart.js插件,中文网地址:http:// ...
- 13个JavaScript图表（JS图表）图形绘制插件
转自:http://blog.jobbole.com/13671/ 1. Flash 过去是最佳解决方案,但很多人多在从那迁移: 2. 现代浏览器及其更强大的计算能力,使其在转化绘制实时数据方面的能力 ...
- 转-——推荐几个web中常用的一些js图表插件 - zccst
http://www.tuicool.com/articles/bqq2Qn 作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph f ...
随机推荐
- centos 6.8安装java环境
1.rpm -qa |grep java 查看当前是否有java已经安装了,部分centos系统已经安装了的openjava环境,但是很多项目不熟要求的是要必须是sun的java环境 2.yum ...
- P1796 汤姆斯的天堂梦
题目描述 汤姆斯生活在一个等级为0的星球上.那里的环境极其恶劣,每天12小时的工作和成堆的垃圾让人忍无可忍.他向往着等级为N的星球上天堂般的生活. 有一些航班将人从低等级的星球送上高一级的星球,有时需 ...
- C++中关于配置文件的问题
眼下本人考虑到部门配置文件较多,所以想写个配置文件检測程序. 眼下大致的思路例如以下三部分; 1, 读取配置文件的内容(*.ini). 查找配置文件,代码例如以下 void CDataBaseDlg: ...
- Linux Shell常用技巧(七)
十六. 文件查找命令find: 下面给出find命令的主要应用示例: /> ls -l #列出当前目录下所包含的测试文件 -rw-r--r--. 1 root root 48 ...
- Rendering Engine 主流的浏览器内核（排版引擎、渲染引擎、解释引擎）有哪几种，分别的特点
一.A web browser engine A rendering engine is software that draws text and images on the screen. The ...
- 测试oracle表空间自动扩展
2019-04-1116:01:25 表空间分配10m自动扩展,向表中插入数据,看表空间达到10m以后是否会报错. 测试过程如下: 1.创建表空间 CREATE TABLESPACE TEST DAT ...
- MySQL数据库初始
MySQL数据库 本节目录 一 数据库概述 二 MySQL介绍 三 MySQL的下载安装.简单应用及目录介绍 四 root用户密码设置及忘记密码的解决方案 五 修改字符集编码 六 初识sql语句 一 ...
- 第一次作业：基于Linux-0.12的进程分析
这次作业主要基于Linux-0.12的源代码,分析Linux是如何组织进程,进程的状态之间是如何转换,以及进程是如何调度的. 一. 进程的概念: 1.进程就是:程序在数据集合上的一次运行过程,是系统进 ...
- QT中QToolTip样式设置的两种方式
方式一 使用样式表设置 ui.label->setStyleSheet("QToolTip{border:1px solid rgb(118, 118, 118); backgroun ...
- 使用Themeleaf时， HTML内嵌的JS代码需要注意< 和 >的问题
如果你使用了Themeleaf, 你的HTML文件又使用了内嵌的JS代码,那么一定要注意 你的JS代码必须用这样用: <script> /*<![CDATA[*/ var a = 6 ...