# 區域組件 區域組件是構成圖表的基本結構。區域組件包括表頭（WxTitle），圖例（WxLegend），軸（WxScale）等，其“領土”配置統一由布局組件（WxLayout）控制。 在wx-chart中，每個區域組件都繼承于`WxBaseComponent`，擁有自己的聲明周期，并在Canvas中占有一定的“領土”，用于渲染自己。這也意味著，區域組件是可以獨立渲染的，并只需要為其賦予一個空圖表（WxChart）實例。 以下為簡單表頭組件的例子  ```js import { WxChart } from 'wx-chart'; import { WxTitle } from 'wx-chart/core/title'; const wxChart = new WxChart('myCanvas', { width: 600, height: 350 }); const title = new WxTitle(wxChart, { fontSize: 23, fontColor: '#840004', }); // 直接渲染 title.update('Title', wxChart.innerBox); ``` 可以看到，我們直接引用了 `core/title` 路徑下的 `WxTitle`獲得了表頭組件的實例；而后將在實例化時，分別傳入WxChart實例與配置信息，最后調用 `update` 方法，組件就直接渲染了。 你可能會注意到 `wxChart.innerBox` 對象，這是一個包含布局信息的 盒布局對象（BoxInstance）我們會在 [組件布局](component.md#layout) 章節中講到他。 ## <span id="title">表頭</span> 表頭組件（WxTitle）是最簡單的組件。你可以按照如下方法引用獲得實例： ```js import { WxTitle } from 'wx-chart/core/title'; ``` 常用的配置如下： | 參數 | 類型 | 說明 | 默認值 | | ------------- |:-------------:|:----------------|:-------:| | position | string |緊挨位置，頂部（top）或底部（bottom） | top | | fullWidth | Boolean |標志是否占滿整個寬度，當為true時，width設置無效| true | | fontSize | number |字體大小 | 16 | | fontColor | string |[CSS顏色值](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | #666666 | | padding | number |間距 | 10（px） | ## <span id="legend">圖例</span> 圖例組件（WxLegend）相對比較復雜，其作為一個基本組件與圖表配合，顯示圖表各個系列表示的意思。 引用方式如下： ```js import { WxLegend } from 'wx-chart/core/legend'; ``` 圖例組件需要在update時傳入一個數組，并且可以根據寬高設置位置，支持雙重設置，如'top bottom'。  ```js let wxChart = ...; let legend = new WxLegend(wxChart, { position: 'right bottom' }); let datasets = [{ text: 'Jun', fillStyle: '#00eabf', trokeStyle: '#00b574' },{ text: 'July', fillStyle: '#eae742', strokeStyle: '#eac900' },{ text: 'Aug', fillStyle: '#5353ea', strokeStyle: '#404aea' },{...}]; legend.update(datasets, wxChart.innerBox); ``` 常用的配置如下： | 參數 | 類型 | 說明 | 默認值 | | ------------- |:-------------:|:----------------|:-------:| | position | string | top,left,bottom或right，或者設置邊角位置，如'left top' | top | | fullWidth | Boolean |標志是否占滿整個寬度，當為true時，width設置無效| true | | labels | Object |設置字體字號等 | {boxWidth: 30,fontSize: 11,padding: 10} | | labels.boxWidth | number |圖例方塊的寬度 | 30 | | labels.fontSize | number |字體 | 11（px） | | labels.padding | number |框間距 | 10（px） | ## <span id="scale">軸</span> 軸（WxScale）組件作為基礎組件，可以在相應的區域內繪畫水平或垂直軸。 `WxScale` 是軸組件基礎類，除此之外還有多個繼承組件，如 `WxLinerScale` 組件，實現了線性值適應性的軸組件。 基礎的軸組件，你可以按照如下方法引用獲得實例： ```js import { WxScale } from 'wx-chart/core/scale'; ``` 基礎的軸，傳入每個軸的值點既可以生成一個軸。并且可以在聲明時，設置`position` 參數，便可以控制軸的繪畫方式，如下所示：  ```js let wxChart = ...; let scale = new WxScale(wxChart, { 'position': 'right' }); let datasets = [{ 'text': '100', 'lineWidth': 2 },{ 'text': '80' },{ 'text': '60' },{ 'text': '40' },{ 'text': '20' },{ 'text': '0' }]; let box = wxChart.innerBox.clone(); scale.update(datasets, box); ``` 基礎軸的配置如下： | 參數 | 類型 | 說明 | 默認值 | | ------------- |:-------------:|:----------------|:-------:| | position | string | top,left,bottom或right | top | | color | [CSS顏色值](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | 軸的顏色 | '#000000' | | lineWidth | number | 軸的線寬度值 | 1 | | title | string | 軸的標題 | | | titleFontSize | number | 軸的標題文字字號 | 12 | | titleFontColor | [CSS顏色值](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | 軸的標題文字顏色 | '#4c4d4d' | | ticks | Object| 軸上點的設置 | { display: true, autoSkip: true,lineWidth: 1,fontColor: '#000000',fontSize: 11,minRotation: 0,maxRotation: 90} | 軸上每一個點可以單獨配置，在傳入數據時設置即可（上面的例子中，第一個點就是單獨設置了lineWidth）。如果沒有全局配置，則遵循圖形的`ticks`設置項，全局配置。 軸上點（Tick）的全局配置如下： | 參數 | 類型 | 說明 | 默認值 | | ------------- |:-------------:|:----------------|:-------:| | autoSkip | Boolean | 如果點比較多，允許圖形放棄某些集中區域的點 | true | | lineWidth | number | 圖形點的寬度配置 | 1 | | fontColor | [CSS顏色值](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | 標識點的文字顏色 | '#000000' | | fontSize | number | 標識點的文字字號 | 11 | | minRotation | number | 當空間不夠時，系統會以中心點旋轉文字排列，設定旋轉角度的最小值 | 0 | | maxRotation | number | 當空間不夠時，系統會以中心點旋轉文字排列，設定旋轉角度的最小值 | 90 | ### <span id="categoryScale">分類軸</span> 分類軸（WxCategoryScale）組件作為基礎軸的衍生組件，主要增加了一些輔助方法用于計算范圍邊界。 ### <span id="linerScale">線性軸</span> 線性軸（WxLinerScale）組件作為基礎軸的衍生組件，主要適用于一定數值范圍的軸的繪制，并且提供方法，在給定的數值范圍內自動生成軸上點。 簡單的使用方法如下圖所展示：  ```js import { WxLinerScale } from 'wx-chart/scale/scale.liner'; let wxChart = ...; let scale = new WxLinerScale(wxChart, { 'position': 'bottom' }); let box = wxChart.innerBox.clone(); // 自動計算最優間隔點 let tickLimits = scale.calculateTickLimit(box, wxChart.ctx); // 計算間隔點值，范圍 -10 ~ 178 let datasets = scale.buildDatasets(178, -10, tickLimits); // [{text: '-20', value: -20}, {text: '0', value: 0}, {text: '20', value: 20}, {text: '40', value: 40}, {text: '60', value: 60}, {text: '80', value: 80}, {text: '100', value: 100}, {text: '120', value: 120}, {text: '140', value: 140}, {text: '160', value: 160}, {text: '180', value: 180}] scale.update(datasets, box); ``` ### <span id="crossScale">交叉軸</span> 交叉軸組件是整合兩個軸組件的幫助工具，可以快速的繪制一個二維的X-Y軸。 如下所示，只需要講XY軸定義完成，傳入交叉軸實例即可。  ```js import WxCategoryScale from '../src/scale/scale.category' import WxLinerScale from '../src/scale/scale.liner' import WxCrossScale from '../src/scale/scale.crosshelp' let wxChart = ...; // x-axis let xScale = new WxCategoryScale(wxChart, { 'position': 'bottom' }); let xScaleDatasets = [{ text: '一月' }, { text: '二月' }, { text: '三月' }, { text: '四月' }, { text: '五月' }]; // y-axis let yScale = new WxLinerScale(wxChart, { 'position': 'left' }); let yMin = -10, yMax = 178; let box = wxChart.innerBox.clone(); let tickLimits = yScale.calculateTickLimit(box, wxChart.ctx); let yScaleDatasets = yScale.buildDatasets(yMax, yMin, tickLimits); let wxCrossScale = new WxCrossScale(xScale, yScale); let {xBox, yBox} = wxCrossScale.draw(box, xScaleDatasets, yScaleDatasets); ```