一、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文档进行详细设置。
三、效果截图
四、实例说明
<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>
五、在线演示
演示地址:http://www.52wulian.org/test/HighCharts/highcharts_2_1_chart.html
六、源码下载
下载地址:http://pan.baidu.com/share/link?shareid=206384&uk=3087605183
时间: 2024-10-31 15:08:08