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 首选 ...
随机推荐
- python基础学习之路No.4 数据转换以及操作
练习python的时候经常会用到一些不同数据类型之间的转换操作 搜集了一些资料,整理如下 函数 描述 int(x [,base]) 将x转换为一个整数 long(x [,base] ) 将x转换为一个 ...
- DOS命令大全（一）
#1 一: net use \\ip\ipc$ " " /user:" " 建立IPC空链接 net use \\ip\ipc$ "密码" ...
- Struts 2 Tutorial Basic MVC Architecture
Model View Controller or MVC as it is popularly called, is a software design pattern for developing ...
- Robots.txt 不让搜索引擎收录网站的方法
有没有担心过自己的隐私会在强大的搜索引擎面前无所遁形?想象一下,如果要向世界上所有的人公开你的私人日记,你能接受吗?的确是很矛盾的问题,站长们大都忧虑“如何让搜索引擎收录的我的网站?”,而我们还是要研 ...
- 二、 sql*plus常用命令
一.sys用户和system用户Oracle安装会自动的生成sys用户和system用户(1).sys用户是超级用户,具有最高权限,具有sysdba角色,有create database的权限,该用户 ...
- CentOS 打包压缩文件 zip 命令详解
我们再linux中常见的压缩文件有.tar.gz,.zip,.gz,在linux中,你要习惯没有.rar的日子. 一下为tar,zip命令详解 tar -zcvf /home/files.tar.gz ...
- NPOI操作Excel文件
首先,通过NuGet添加NPOI. NPOI依赖SharpZipLib,通过NuGet添加SharpZipLib. 然后添加NPOI. 添加后项目的引用列表如下: 把DataTable转换成Excel ...
- java 代码中设置 临时 环境变量
System.setProperty("hadoop.home.dir", "D:\\software\\software_install\\dev_install\\h ...
- python import 与 from ... import ...
import test test = 'test.py all code' from test import m1 m1 ='code'
- WebLogic和Tomcat的区别
J2ee开发主要是浏览器和服务器进行交互的一种结构.逻辑都是在后台进行处理,然后再把结果传输回给浏览器.可以看出服务器在这种架构是非常重要的. 这几天接触到两种Java的web服务器,做项目用的Tom ...