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 首选 ...
随机推荐
- No.13 selenium for python 单选框和复选框
单选框 radio 点击图标,可以获取HTML中定位. 使用普通的ID定位就可以了 定位到指定元素,然后使用clicd选中即可 复选框 checkbox 勾选单个框,跟单选框一样,定位后点击就可以了 ...
- 洛谷P2312解方程
传送门 思路分析 怎么求解呢? 其实我们可以把左边的式子当成一个算式来计算,从1到 $ m $ 枚举,只要结果是0,那么当前枚举到的值就是这个等式的解了.可以通过编写一个 $ bool $ 函数来判断 ...
- Kubernetes1.6集群上(开启了TLS)安装Dashboard
本节内容: 配置dashboard 执行所有定义的文件 检查执行结果 访问dashboard 这是接着上一篇<二进制方式部署Kubernetes 1.6.0集群(开启TLS)>写的.Kub ...
- spring boot之org.springframework.boot.context.TypeExcludeFilter
曾经碰到过这样一种情况,想让某个使用了spring 注解的类不被spring扫描注入到spring bean池中,比如下面的类使用了@Component和@ConfigurationPropertie ...
- ACM训练计划建议（转）
ACM训练计划建议 From:freecode# Date:2015/5/20 前言: 老师要我们整理一份训练计划给下一届的学弟学妹们,整理出来了,费了不少笔墨,就也将它放到博客园上供大家参考. 菜 ...
- CSUOJ 1808 地铁
Description Bobo 居住在大城市 ICPCCamp. ICPCCamp 有 n 个地铁站,用 1,2,-,n 编号. m 段双向的地铁线路连接 n 个地铁站,其中第 i 段地铁属于 ci ...
- c/c++--strlen()小问题
int x = 2; char * str = "abcd"; int y = (x - strlen(str)) / 3; printf("%d\n", y) ...
- 机器学习之路： python 实践 提升树 XGBoost 分类器
git: https://github.com/linyi0604/MachineLearning 数据集被我下载到本地,可以去我的git上拿数据集 XGBoost提升分类器 属于集成学习模型 把成百 ...
- BeautifulSoup与Xpath解析库总结
一.BeautifulSoup解析库 1.快速开始 html_doc = """ <html><head><title>The Dor ...
- 我们不能把JavaScript作为一个全功能的编程语言。它缺乏以下重要特征
客户端JavaScript不允许读或写文件.这已被保存的安全原因. JavaScript不能用于网络的应用,因为没有这样的支持. JavaScript没有任何多线程或多处理器的能力.