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: -20 //设置位置 }, chart:{ height:400, width:900 }, colors:['#058DC7','#CAD005','#7CD43A','#DD4F43'],//设置线条颜色 subtitle: { text: '最近13周时段客流分布（人）',//设置副标题 x: -20 }, xAxis: { categories: [0, 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], title:{ text:''//设置X轴标题 }, plotLines: [{ value: 0, width: 2, color: 'red'//设置y值为value的横坐标轴的线宽和颜色 }], min:0,//设置最小起始位置 gridLineColor:'#ccc',//设置网格线颜色 gridLineWidth:1//设置网格线宽度 }, yAxis: { min:0,//设置Y轴的最小值为0 title: { align:'high',//设置标题相对于y轴的位置 text: '西丽壮丽大厦营业厅',//设置Y轴的标题 x:80,//设置y轴标题具体位置X轴坐标 y:-20,//设置y轴标题具体位置Y轴坐标 rotation:0//设置y轴标题旋转角度 }, plotLines: [{ value: 0, width: 2, color: 'red'//设置y值为value的横坐标轴的线宽和颜色 }], gridLineColor:'#ccc',//设置网格线颜色 gridLineWidth:1//设置网格线宽度 }, tooltip: {//数据点提示框，用于设置当鼠标滑向数据点时显示的提示框信息 valueSuffix: '°C'//纵坐标值的单位 }, legend: { layout: 'horizontal',//设置图例是水平还是垂直方向 可选：vertical,horizontal align: 'center',//设置图例水平方向的对齐方式 可选:left right center x:120,//设置图例具体位置X轴坐标 y:70,//设置图例具体位置Y轴坐标 verticalAlign: 'top',//设置图例垂直方向的对齐方式 可选：bottom top middle borderWidth: 1,//设置图例盒子的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, 3,3,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:1,//设置网格线宽度 crosshair: true//设置是否显示Y轴十字架线条 }, yAxis: { min: 0, title: { text: '' }, labels:{ formatter:function () { return this.value+'%';//自定义Y轴的显示 } }, crosshair: true//设置是否显示X轴十字架线条 }, legend : { layout: 'vertical', align: 'right', verticalAlign: 'top', borderWidth: 0 }, 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: 0 }, series:{ pointWidth:35 //设置柱状图宽度 } }, series: [{ name: '客流占比', data: [10.9, 12.5, 13.4, 14.2, 18.4, 22.1, 26.6] }] }); }); </script> </body> </html>
