highcharts 画图选项配置（待完善------）
在使用highcharts画图过程中，经常查阅图表选项设置，现将画图过程中设置过的选项收集记录如下留待以后参考：
折线图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 650px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
title: {
text: '时段客流高低峰分析',
x: - //设置位置
},
chart:{
height:,
width:
},
colors:['#058DC7','#CAD005','#7CD43A','#DD4F43'],//设置线条颜色
subtitle: {
text: '最近13周时段客流分布（人）',//设置副标题
x: -
},
xAxis: {
categories: [, 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
title:{
text:''//设置X轴标题
},
plotLines: [{
value: ,
width: ,
color: 'red'//设置y值为value的横坐标轴的线宽和颜色
}],
min:,//设置最小起始位置
gridLineColor:'#ccc',//设置网格线颜色
gridLineWidth://设置网格线宽度
},
yAxis: {
min:,//设置Y轴的最小值为0
title: {
align:'high',//设置标题相对于y轴的位置
text: '西丽壮丽大厦营业厅',//设置Y轴的标题
x:,//设置y轴标题具体位置X轴坐标
y:-,//设置y轴标题具体位置Y轴坐标
rotation://设置y轴标题旋转角度
},
plotLines: [{
value: ,
width: ,
color: 'red'//设置y值为value的横坐标轴的线宽和颜色
}],
gridLineColor:'#ccc',//设置网格线颜色
gridLineWidth://设置网格线宽度
},
tooltip: {//数据点提示框，用于设置当鼠标滑向数据点时显示的提示框信息
valueSuffix: '°C'//纵坐标值的单位
},
legend: {
layout: 'horizontal',//设置图例是水平还是垂直方向 可选：vertical,horizontal
align: 'center',//设置图例水平方向的对齐方式 可选:left right center
x:,//设置图例具体位置X轴坐标
y:,//设置图例具体位置Y轴坐标
verticalAlign: 'top',//设置图例垂直方向的对齐方式 可选：bottom top middle
borderWidth: ,//设置图例盒子的border宽度
borderColor:'#DD4F43'//设置图例盒子边框颜色
},
series: [{
name: 'Tokyo',
data: [{y:7.0,color:'red'}, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]//设置某个特殊点的颜色
}, {
name: 'New York',
data: [-0.2, 0.8, ,,4.9,{y:5.7,color:'yellow'}, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1]//设置某个特殊点的颜色
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
</script>
</body>
</html>
饼状图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 650px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '南山创维大厦营业厅 日客流占比分析（连续15周）'
},
credits:{
enabled:false//去掉版权水印
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,//允许选中
cursor: 'pointer',//鼠标放上去变成手势
dataLabels: {
enabled: true,//设置每一板块是否有提示
format: '<b style="color:red">{point.name}</b>: {point.percentage:.1f} %',//可设置颜色和样式
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,//设置块与块之间是否有间隙
selected: true//设置是否为选中状态
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
}); </script>
</body>
</html>
柱状图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 650px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: '西丽壮丽大厦营业厅 日客流占比分析（连续15周）'
},
subtitle: {
text: '2015/10/05-2016/01/17'
},
credits:{
enabled:false//去掉版权水印
},
xAxis: {
categories: [
'周一',
'周二',
'周三',
'周四',
'周五',
'周六',
'周日'
],
gridLineColor:'#ccc',//设置网格线颜色
gridLineWidth:,//设置网格线宽度
crosshair: true//设置是否显示Y轴十字架线条
},
yAxis: {
min: ,
title: {
text: ''
},
labels:{
formatter:function () {
return this.value+'%';//自定义Y轴的显示
}
},
crosshair: true//设置是否显示X轴十字架线条
},
legend : {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
borderWidth:
},
tooltip: {//设置数据点提示框
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} %</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth:
},
series:{
pointWidth: //设置柱状图宽度
}
},
series: [{
name: '客流占比',
data: [10.9, 12.5, 13.4, 14.2, 18.4, 22.1, 26.6]
}]
});
}); </script>
</body>
</html>
highcharts 画图选项配置（待完善------）的更多相关文章
- Highcharts选项配置详细说明文档(zz)
http://www.helloweba.com/view-blog-156.html Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明 ...
- Jquery Highcharts 选项配置 说明文档
Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,下面为Highcharts常用的最核心的参数选项配置. Chart:图表区选项 Chart图表区选项用于设置图表区相关属性 ...
- Highcharts选项配置详细说明文档
Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明文档,而中文版的文档网上甚少,且零散不全.这里,我把Highcharts常用的最核心的参 ...
- 网页图表控件Highcharts选项配置参数
Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明文档,而中文版的文档网上甚少,且零散不全.这里,我把Highcharts常用的最核心的参 ...
- Highcharts常用的最核心的参数选项配置详细说明
Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明文档,而中文版的文档网上甚少,且零散不全.这里,我把Highcharts常用的最核心的参 ...
- webpack里的module选项配置
webpack里的module 有loaders选项和noParse选项,noParse选项配置不需要解析的目录和文件 module:{ loaders:[], noParse: [ path.joi ...
- asp.net core选项配置的研究
asp.net-core选项模块是全新,可拓展的框架,其作用在整个.net-core框架中,就像依赖注入一样无处不在,是一个很重要的组件. 其实配置模块与选项模块是紧密相连的,我们可以使用Config ...
- Vue实例初始化的选项配置对象详解
Vue实例初始化的选项配置对象详解 1. Vue实例的的data对象 介绍 Vue的实例的数据对象data 我们已经用了很多了,数据绑定离不开data里面的数据.也是Vue的核心属性. 它是Vue绑定 ...
- vscode 插件安装以及首选项配置
1.插件 Auto Close Tag Path Intellisense Prettier Vetur vscode-icons Bracket Pair Colorizer 2.vscode 首选 ...
随机推荐
- dpr 与 dproj 有什么区别
- Java关于数组操作函数
数组排序及元素查找 sort()方法对Java数组进行排序. binarySearch() 方法来查找数组中的元素,返回该元素所在的位置. import java.util.*; public cla ...
- JavaScript event loop事件循环 macrotask与microtask
macrotask 姑且称为宏任务,在很多上下文也被简称为task.例如: setTimeout, setInterval, setImmediate, I/O, UI rendering. mic ...
- 【LOJ】#2070. 「SDOI2016」平凡的骰子
题解 用了一堆迷之复杂的结论结果迷之好写的计算几何???? 好吧,要写立体几何了 如果有名词不懂自己搜吧 首先我们求重心,我们可以求带权重心,也就是x坐标的话是所有分割的小四面体的x坐标 * 四面体体 ...
- 国内最火的 HTML、CSS、JavaScript 开源项目 Top 榜，你知多少？
对于开发者而言,想要着手前端开发,HTML.CSS 和 JavaScript 是三项必备的基础技能.而如何事半功倍地掌握好这些知识?通过了解当下火热的开源项目不乏为最佳学习姿势.本文盘点国内评分最高且 ...
- Python 爬虫个人记录（一）豆瓣电影250
一.爬虫环境 Python3.6 scrapy1.4 火狐浏览器 qq浏览器 二.scrapy shell 测试并获取 xpath 1.进入scrapy shell 2 .获取html fetch(' ...
- Oracle登录
一.安装Oracle 二.打开Database Configuration Assistant 三.打开SQL Plus 1.打开SQL Plus 2.输入用户名sys 3.输入口令1 as sysd ...
- printf的定义
1. printf的宏定义 #define XXX_ERROR 0#define XXX_WARNING 1#define XXX_INFO 2#define XXX_DEBUG 3#define X ...
- Linux信号量同步共享内存实验.
Linux信号量同步共享内存实验. Linux信号量同步共享内存实验. 简述 程序流程 信号量和共享内存的系统函数 信号量系统函数及接口 共享内存系统函数及接口 写程序 读程序 简述 本文主要内容是自 ...
- python语法（一）
Python是一种面向对象.直译式电脑编程语言,也是一种功能强大的通用型语言,已经具有近二十年的发展历史,成熟且稳定.在近几年,大数据,人工智能火起来之后也是水涨船高,被越来越多的人知道,并且越来越多 ...