Highcharts製作圖片表設定線條顏色…
阿新 • • 發佈：2018-12-27
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方法等的回撥函式。 |
Color：顏色選項
Color顏色選項用於設定圖表的顏色方案。
| 引數 | 描述 | 預設值 |
| color | 用於展示圖表，折線/柱狀/餅狀等圖的顏色，陣列形式。 | array |
Highcharts已經預設提供了多種顏色方案，當要顯示的圖形多於顏色種類時，多出的圖形會自動從第一種顏色方案開始選取。自定義顏色方案的方法：
Highcharts.setOptions({
colors:['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4']
});
Title：標題選項
Title標題選項用於設定圖表的標題相關屬性。
| 引數 | 描述 | 預設值 |
| text | 標題文字內容。 | Chart title |
| align | 水平對齊方式。 | center |
| verticalAlign | 垂直對齊方式。 | top |
| margin | 標題與副標題之間或者主圖表區間的間距。 | 15 |
| floating | 是否浮動，如果為true，則標題可以偏離主圖表區，可配合x,y屬性使用。 | false |
| style | 設定CSS樣式。 |
{color:'#3E576F', fontSize:'16px'} |
Subtitle：副標題選項
副標題提供的屬性選項與標題title大致相同，可參照上述標題選項，值得一提的是副標題的text選項預設為''，即空的，所以預設情況下副標題不顯示。
xAxis：X軸選項
X軸選項用於設定圖表X軸相關屬性。
| 引數 | 描述 | 預設值 |
| categories | 設定X軸分類名稱，陣列，例如：categories:['Apples', 'Bananas', 'Oranges'] | [] |
| title | X軸名稱，支援text、enabled、align、rotation、style等屬性 | |
| labels | 設定X軸各分類名稱的樣式style，格式formatter，角度rotation等。 | array |
| max | X軸最大值(categories為空時)，如果為null，則最大值會根據X軸資料自動匹配一個最大值。 | null |
| min | X軸最小值(categories為空時)，如果為null，則最小值會根據X軸資料自動匹配一個最小值。 | array |
| gridLineColor | 網格（豎線）顏色 | #C0C0C0 |
| gridLineWidth | 網格(豎線)寬度 | 1 |
| lineColor | 基線顏色 | #C0D0E0 |
| lineWidth | 基線寬度 | 0 |
yAxis：Y軸選項
Y軸選項與上述xAxis選項基本一致，請參照上表中的引數設定，不再單獨列出。
Series：資料列選項
資料列選項用於設定圖表中要展示的資料相關的屬性。
| 引數 | 描述 | 預設值 |
| data |
顯示在圖表中的資料列，可以為陣列或者JSON格式的資料。如：data:[0, 5, 3, 5]，或 data:[{name:'Point 1',y:0}, {name:'Point 2',y:5}] |
'' |
| name | 顯示資料列的名稱。 | '' |
| type | 資料列型別，支援 area, areaspline, bar, column, line, pie, scatter or spline | line |
plotOptions：資料點選項
plotOptions用於設定圖表中的資料點相關屬性。plotOptions根據各種圖表型別，其屬性設定略微有些差異，現將常用選項列出來。
| 引數 | 描述 | 預設值 |
| enabled | 是否在資料點上直接顯示資料 | false |
| allowPointSelect | 是否允許使用滑鼠選中資料點 | false |
| formatter | 回撥函式，格式化資料顯示內容 | formatter:function() {return this.y;} |
Tooltip：資料點提示框
Tooltip用於設定當滑鼠滑向資料點時顯示的提示框資訊。
| 引數 | 描述 | 預設值 |
| enabled | 是否顯示提示框 | true |
| backgroundColor | 設定提示框的背景色 | rgba(255, 255, 255, .85) |
| borderColor | 提示框邊框顏色，預設自動匹配資料列的顏色 | auto |
| borderRadius | 提示框圓角度 | 5 |
| shadow | 是否顯示提示框陰影 | true |
| style | 設定提示框內容樣式，如字型顏色等 | color:'#333' |
| formatter |
回撥函式，用於格式化輸出提示框的顯示內容。返回的內容支援html標籤如：, , , , , |
2 |
Legend：圖例選項
legend用於設定圖例相關屬性。
| 引數 | 描述 | 預設值 |
| layout | 顯示形式，支援水平horizontal和垂直vertical | horizontal |
| align | 對齊方式。 | center |
| backgroundColor | 圖例背景色。 | null |
| borderColor | 圖例邊框顏色。 | #909090 |
| borderRadius | 圖例邊框角度 | 5 |
| enabled | 是否顯示圖例 | true |
| floating | 是否可以浮動，配合x，y屬性。 | false |
| shadow | 是否顯示陰影 | false |
| style | 設定圖例內容樣式 | '' |
來源於helloweba.com