【HighCharts系列教程】三、图表属性——chart

时间:2020-11-28 21:56:33

一、chart属性说明

Chart是HighCharts图表中主要属性,包括了图表区域的颜色、线条、高度、宽度、对齐、图表类型等诸多属性,也是HighCharts图表中必须配置的属性之一。

配置chart属性,你可以轻松改变你的图表的样式、外观。

二、chart属性详解

Chart常用属性如下表

参数 描述 默认值
backgroundColor 设置图表区背景色 #FFFFFF
borderWidth 设置图表边框宽度 0
borderRadius 设置图表边框圆角角度 5
renderTo 图表放置的容器,一般在html中放置一个DIV,获取DIV的id属性值 null
defaultSeriesType 默认图表类型line, spline, area, areaspline,
column, bar, pie , scatter
0
width 图表宽度,默认根据图表容器自适应宽度 null
height 图表高度,默认根据图表容器自适应高度 null
margin 设置图表与其他元素之间的间距,数组,如[0,0,0,0] [null]
plotBackgroundColor 主图表区背景色,即X轴与Y轴围成的区域的背景色 null
plotBorderColor 主图表区边框的颜色,即X轴与Y轴围成的区域的边框颜色 null
plotBorderWidth 主图表区边框的宽度 0
shadow 是否设置阴影,需要设置背景色backgroundColor false
reflow 是否自使用图表区域高度和宽度,如果没有设置width和height时,会自适应大小 true
zoomType 拖动鼠标进行缩放,沿x轴或y轴进行缩放,可以设置为:‘x’,'y’,'xy’
events 事件回调,支持addSeries方法,click方法,load方法,selection方法等的回调函数  

chart属性下还有更多不常用的配置,可以参考API文档进行详细设置。

三、效果截图

【HighCharts系列教程】三、图表属性——chart

四、实例说明

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
//HighCharts中chart属性配置
chart: {
renderTo: 'container',//div 标签
type: 'line',//图表类型 /******************以下chart配置可选******************/
backgroundColor:"#EAF7FF",//图表背景色
borderWidth:5,//图表边框宽度
borderRadius:15,//图表边框圆角角度
plotBackgroundColor:"#6DBFBB",//主图表区背景颜色
plotBorderColor:'red',//主图表边框颜色
plotBorderWidth:2,//主图表边框宽度
shadow:true,//是否设置阴影
zoomType:'xy'//拖动鼠标放大图表的方向
},
credits : {
href:'http://www.52wulian.org',
position: {
x:-30,
y:-30
},
style:{
color:'red',
fontWeight:'bold'
},
text:'我爱物联网'
},
xAxis: {
categories: ['1','2','3','4','5']
},
series: [{
name: 'series1',
data: [2,4,5,9,2]
}]
});
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

五、在线演示

六、源码下载