Day4 chart基本屬性分析
- 2019 年 10 月 4 日
- 筆記
屬性設置是基於chart實例的，所以我們必須先獲取一個chart畫板實例，獲取方式： G2.Chart。創建 Chart 的方式如下：
new G2.Chart({ container: {string} | {HTMLDivElement}, width?: {number}, height?: {number}, padding?: {object} | {number} | {array}, background?: {object}, plotBackground?: {object}, forceFit?: {boolean}, animate?: {boolean}, pixelRatio?: {number}, data?: {array} | {DataSet.View}, theme?: {string} | {object}, renderer?: {string}, });
創建一個 chart 實例，返回一個 Chart 對象，建議在單個容器上只初始化一個 Chart 實例，接下來對chart的各個屬性進行一一解析，其中紅色字樣為常用屬性或重要注意點。
1.container
對應圖表的 DOM 容器，可以傳入該 DOM 的 id 或者直接傳入容器的 HTML 節點對象,也就是說DOM容器不一定是div。
注意點：
1.其中容器標籤不一定是div標籤，但必須是能包含div的標籤，至於哪些標籤能夠包含div標籤，可以參考標籤嵌套問題總結
2.容器標籤中也不一定必須綁定id，綁定class等也可以，只要能獲取到該元素就行，但相對來說綁定id最為合適，因為一般每幅圖都是獨一無二的，但如果需要多副相同的圖時，需要寫重複程式碼，所以這裡可以提個需求：讓容器允許接收元素數組，而不是單單某一個元素。
3.可以使用id代替container
源程式碼：
解析：if條件表示如果沒有container屬性且有id屬性，則將id的屬性值賦給container。
示例：
<div id="root"></div>
const chart = new G2.Chart({ container: document.getElementById('root'), // 或直接填 'root'或者id:'root' width: 1000, height: 500 });
2.forceFit
圖表的寬度自適應開關，默認為 false，設置為 true 時表示自動取DOM容器（實例容器）的寬度。
注意：這裡只取DOM容器的寬度，高度是取實例化chart時設置的height，如果未設置則默認height為500px。
源程式碼：
解析：如果forceFit為真值，則將圖表的width重設為DOM容器的寬度，但是高度不重設。
3.width
指定圖表的寬度，單位為 'px'，未設置時默認是500，當 forceFit: true 時寬度配置不生效。 4.height
指定圖標的高度，單位為'px',未設置時默認是500，且不受forceFit影響。
5.padding
默認值為[ 20, 20, 95, 80 ]
設置圖表的內邊距，設置的是圖表邊界到坐標軸的距離，下圖中即粉色邊框到黑色坐標軸的距離。
padding支援如下幾種設置方式：
-
padding: [ 20, 30, 20, 30] -
padding: 20 -
padding: { top: 20, right: 30, bottom: 20, left: 30 } -
padding: 'auto' -
padding: [20, 'auto', 30, 'auto']
- 另外也支援設置百分比，如
padding: [ '20%', '30%' ]，該百分比相對於整個圖表的寬高。 - padding 為數字以及數組類型時使用方法同 CSS 盒模型（上右下左）。
- padding 中存在 'auto'，時會自動計算邊框，目前僅考慮 axis 和 legend 佔用的邊框。
6.background
設置圖表整體的邊框和背景樣式，是一個對象，下圖中的灰色背景部分就是background設置的區域(即整個chart畫板區域)，包含如下屬性：
background: { fill: {string}, // 圖表背景色 fillOpacity: {number}, // 圖表背景透明度 stroke: {string}, // 圖表邊框顏色 strokeOpacity: {number}, // 圖表邊框透明度 opacity: {number}, // 圖表整體透明度 lineWidth: {number}, // 圖表邊框粗度 radius: {number} // 圖表圓角大小 }
7.plotBackground
圖表繪圖區域的邊框和背景樣式，是一個對象，下圖中的灰色背景部分就是plotBackground設置的區域(即圖表繪製區域)，包含如下屬性：
注意：從background和plotBackground兩幅圖中可以看出，當同時設置兩個屬性時，plotBackground屬性設置會覆蓋background屬性。
plotBackground: { fill: {string}, // 圖表背景色 fillOpacity: {number}, // 圖表背景透明度 stroke: {string}, // 圖表邊框顏色 strokeOpacity: {number}, // 圖表邊框透明度 opacity: {number}, // 圖表整體透明度 lineWidth: {number}, // 圖表邊框粗度 radius: {number} // 圖表圓角大小 }
8.animate
圖表動畫開關，默認為 true，即開啟動畫。 9.pixelRatio
設置設備像素比，默認取瀏覽器的值 window.devicePixelRatio。
10.data
設置圖表的數據源
data數據源格式只有兩種：
- 包含 JSON 對象的數組
var data=[{year:1995,value:10},{year:1996,value:15},{year:1997,value:25}]
- DataSet.View 對象，創建方式也有兩種(DataSet會在之後的章節詳細講述，此處可以理解成就是一個圖表）
方式1： var dv=new DataSet.View(); 方式2： var ds=new DataSet(); var dv=ds.createView();
data數據源導入方式也有兩種：
- 直接在chart實例化中的options的data屬性中設置
new G2.Chart({ container: {string} | {HTMLDivElement}, width: {number}, height: {number}, data: {array} | {DataSet.View}, });
- 使用chart.source(data)方法設置。
const chart=new G2.Chart({ container: {string} | {HTMLDivElement}, width: {number}, height: {number}, }); var data=[{year:1995,value:15},{year:1996,value:20},{year:1997,value:40}]; chart.source(data);
建議使用chart.source(data)方法設置數據源。
11.theme
設置當前圖表的主題，可以是字元串 default 或者 dark（這兩個是目前 G2 支援的主題），也可以是一個包含主題配置項的對象，具體設置形式參考 圖表皮膚。這是「Chart 級別的主題樣式配置」，默認值為default。
12.renderer
設置當前圖表的使用的渲染方案，可以是字元串 canvas 或者 svg（這兩個是目前 G2 支援的渲染引擎），渲染引擎的選擇會影響圖表最終的渲染性能。具體兩種渲染引擎的差異可以參考 選擇 Canvas 還是 SVG，默認為Canvas渲染。
