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 首选 ...
随机推荐
- Extjs 代码拾穗
1.tree grid 添加一行 var rootNode = store.getRootNode(); var newRecord = Ext.create('MatrixDlv',{"s ...
- python对象学习
python对象的介绍 python使用对象模型来存储数据,构造任何类型的值都是一个对象,尽管python被当成面向对象的编程语言,但是完全编写不使用任何类和实例的脚本.所有的python对象都拥有三 ...
- 学习python绘图
学会python画图 # 使用清华的pip源进行安装sklearn # pip install -i https://pypi.tuna.tsinghua.edu.cn/simple -U sciki ...
- HA下的Spark集群工作原理解密
实验环境: zookeeper-3.4.6 Spark:1.6.0 简介: 本篇博客将从以下几点组织文章: 一:Spark 构建高可用HA架构 二:动手实战构建高可用HA 三:提交程序测试HA 一:S ...
- hdu-1540线段树刷题
title: hdu-1540线段树刷题 date: 2018-10-18 19:55:21 tags: acm 刷题 categories: ACM-线段树 概述 哇,,,这道线段树的题可以说是到目 ...
- shell if [ -d filename]
[ -a FILE ] 如果 FILE 存在则为真. [ -b FILE ] 如果 FILE 存在且是一个块特殊文件则为真. [ -c FILE ] 如果 FILE 存在且是一个字特殊文件则为真. [ ...
- [leetcode tree]104. Maximum Depth of Binary Tree
求树的最大深度 class Solution(object): def maxDepth(self, root): if not root: return 0 left = self.maxDepth ...
- WSGI剖析
在一个 HTTP 请求到达服务器时, 服务器接收并调用 web 应用程序解析请求, 产生响应数据并返回给服务器. 这里涉及了两个方面的东西: 服务器(server)和应用程序(application) ...
- php常见网络攻击及防御方法
常见的Web攻击分为两类:一是利用Web服务器的漏洞进行攻击,如CGI缓冲区溢出,目录遍历漏洞利用等攻击;二是利用网页自身的安全漏洞进行攻击,如SQL注入,跨站脚本攻击等.下面这篇文章主要介绍了PHP ...
- android 打开 res raw目录 中 数据库文件
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 安卓不能直接打开 res raw 中的 数据库 文件. 通过 资源 获取资源 方法 , ...