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 首选 ...
随机推荐
- Codeforces 801C Voltage Keepsake(二分枚举+浮点（模板）)
题目链接:http://codeforces.com/contest/801/problem/C 题目大意:给你一些电器以及他们的功率,还有一个功率一定的充电器可以给这些电器中的任意一个充电,并且不计 ...
- JAVA复习笔记之GC部分
前言:垃圾回收机制,大家都知道JAVA的垃圾回收都是JVM自动回收的,不需要程序员去管理.但是我们还是得知道原理才能在适当时机进行JVM调优 原理:当我们new 一个对象时JVM堆区就会分配一块 ...
- lambda表达式与bind函数
#include<iostream> #include<algorithm> #include<sstream> #include<vector> #i ...
- Es官方文档整理-2.分片内部原理
Es官方文档整理-2.分片内部原理 1.集群 一个运行的Elasticsearch实例被称为一个节点,而集群是有一个或多个拥有相同claster.name配置的节点组成,他们共同承担数据和负 ...
- Ubuntu 14.04 16.04 Linux nvidia 驱动下载与安装
Ubuntu 14.04 16.04 nvidia 驱动安装 最简单直观的方式是在如下的对话框中直接选择驱动安装即可 但是有时候,驱动不够新,比如14.04用的是340.98版本,如果手动安装驱动可以 ...
- Struts 2 Overview
Struts2 is popular and mature web application framework based on the MVC design pattern. Struts2 is ...
- PHP性能调优，PHP慢日志---善用php-fpm的慢执行日志slow log，分析php性能问题
众所周知,MySQL有slow query log,根据慢查询日志,我们可以知道那些sql语句有性能问题.作为mysql的好搭档,php也有这样的功能.如果你使用php-fpm来管理php的话,你可以 ...
- Inno setup 常用修改技巧
Inno setup 常用修改技巧1 .如何让协议许可页面默认选中我同意按钮 [code]procedure InitializeWizard();beginWizardForm.LICENSEACC ...
- Spark（十六）DataSet
Spark最吸引开发者的就是简单易用.跨语言(Scala, Java, Python, and R)的API. 本文主要讲解Apache Spark 2.0中RDD,DataFrame和Dataset ...
- python学习day4之路
装饰器(http://egon09.blog.51cto.com/9161406/1836763) 1.装饰器:本质是函数: 装饰器(装饰其他函数),就是为其他函数添加附加功能: 原则:1．不能修改被 ...