【HighCharts系列教程】3、圖表屬性——chart
1、chart屬性說明
Chart是HighCharts圖表中主要屬性，包括了圖表區域的顏色、線條、高度、寬度、對齊、圖表類型等諸多屬性，也是HighCharts圖表中必須配置的屬性之一。javascript
配置chart屬性，你能夠輕鬆改變你的圖表的樣式、外觀。html
2、chart屬性詳解
Chart經常使用屬性以下表java
| 參數 | 描述 | 默認值 |
|---|---|---|
| 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文檔進行詳細設置。jquery
3、效果截圖
4、實例說明
<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;