G2Plot是簡單、易用、并具備一定擴展能力和組合能力的統計圖表庫,內置的是業務中使用量占比超過 90% 的常規統計圖表。支持用戶對其進行自定義開發,軟件配置項優化精簡,僅需幾行代碼輕松生成圖表。使用起來也非常方便,可以通過將腳本下載到本地也可以直接引入在線資源。同時軟件還在不斷地進行升級,更多高級圖表功能用戶可以自行體驗一下。

軟件特色
開箱即用
配置項優化精簡,僅需幾行代碼輕松生成圖表
默認好用
即使你是可視化或設計小白,也能制作優雅、標準的統計圖表
響應式圖表
保證圖表在任何顯示尺寸、任何數據狀態下的可讀性
圖表實驗室
來這里嘗試一下我們正在開發中的高級圖表功能

修改柱狀圖顏色
柱狀圖用于描述分類數據之間的對比,如果我們把時間周期,如周、月、年,也理解為一種分類數據。那么要如何自定義柱狀圖的顏色呢,一起來看看修改方法。
1、指定點的顏色。如沒有配置 colorField,指定一個單值即可。對 colorFiled 進行了配置的情況下,即可以指定一系列色值,也可以通過回調函數的方法根據對應數值進行設置。
默認配置:采用 theme 中的色板。
// 設置單一顏色
{
color: '#a8ddb5'
}
// 設置多色
{
colorField: 'type', // 部分圖表使用 seriesField
color: ['#d62728', '#2ca02c', '#000000'],
}
// Function
{
colorField: 'type', // 部分圖表使用 seriesField
color: ({ type }) => {
if(type === 'male'){
return 'red';
}
return 'yellow';
}
}
自定義圖例
圖例是圖表的輔助元素,使用顏色、大小、形狀區分不同的數據類型,用于圖表中數據的篩選。用戶可以在G2Plot中自定義圖例,下面就來告訴大家配置圖例的方法和配置項,方便大家自定義圖例。
1、配置圖例有兩種方式:
第一種,傳入 false 設置關閉圖例。
legend: false; // 關閉圖例
第二種,傳入 LegendCfg 對圖例進行整體配置。
legend: {
layout: 'horizontal',
position: 'right'
}
2、配置項
| 屬性 | 類型 | 默認值 | 描述 |
|---|---|---|---|
| layout | string | horizontal | 圖例的布局方式,可選項:horizontal | vertical |
| title | object | - | 圖例標題配置,默認不展示。詳見 title 配置 |
| position | string | - | 圖例的位置。詳見 position 配置 |
| offsetX | number | - | 圖例 x 方向的偏移。 |
| offsetY | number | - | 圖例 y 方向的偏移。 |
| background | object | - | 背景框配置項。詳見 background 配置 |
| flipPage | boolean | false | 當圖例項過多時是否進行分頁。 |
| itemWidth | number | null | null | 圖例項的寬度, 默認為 null(自動計算)。 |
| itemHeight | number | null | null | 圖例的高度, 默認為 null。 |
| itemName | object | - | 圖例項 name 文本的配置。詳見 itemName 配置 |
| itemValue | object | - | 圖例項 value 附加值的配置項。詳見 itemValue 配置。 |
| itemSpacing | number | - | 控制圖例項水平方向的間距 |
| animate | boolean | - | 是否開啟動畫開關。 |
| animateOption | object | - | 動畫參數配置,當且僅當 animate 屬性為 true,即動畫開啟時生效,詳見 animateOption 配置 |
| label | object | - | 文本的配置項。詳見 label 配置 |
| marker | object | - | 圖例項的 marker 圖標的配置。 |
| maxWidth | number | - | 圖例項最大寬度設置。 |
| maxHeight | number | - | 圖例項最大高度設置。 |
| rail | object | - | 圖例滑軌(背景)的樣式配置項。詳見 rail 配置 |
| reversed | boolean | - | 是否將圖例項逆序展示。 |
| min | number | - | 范圍的最小值。 |
| max | number | - | 選擇范圍的最大值。 |
| value | number[] | - | 選擇的值。 |
| slidable | boolean | - | 滑塊是否可以滑動。 |
| track | object | - | 選擇范圍的色塊樣式配置項。詳見 track 配置 |
| handler | object | - | 滑塊的配置項。詳見 handler 配置 |
| custom | boolean | false | 是否為自定義圖例,當該屬性為 true 時,需要聲明 items 屬性。 |
| items | object[] | - | 用戶自己配置圖例項的內容。詳見 items 配置 |
自定義主題
1、內置主題
目前默認的內置主要要兩套:default和dark
2、主題屬性
除了使用內置的 default 和 dark 主題之外,還可以通過設置主題屬性來修改部分主題內容:
下表列出了組成主題的大配置項上的具體屬性:
| 主題屬性 | 類型 | 描述 |
|---|---|---|
| defaultColor | string | 主題色 |
| padding | number | number[] |
| fontFamily | string | 圖表字體 |
| colors10 | string[] | 分類顏色色板,分類個數小于 10 時使用 |
| colors20 | string[] | 分類顏色色板,分類個數大于 10 時使用 |
| columnWidthRatio | number | 一般柱狀圖寬度占比,0 - 1 范圍數值 |
| maxColumnWidth | number | 柱狀圖最大寬度,像素值 |
| minColumnWidth | number | 柱狀圖最小寬度,像素值 |
| roseWidthRatio | number | 玫瑰圖占比,0 - 1 范圍數值 |
| multiplePieWidthRatio | number | 多層餅圖/環圖占比,0 - 1 范圍數值 |
| geometries | object | 配置每個 Geometry 下每個 shape 的樣式,包括默認樣式以及各個狀態下的樣式 |
| components | object | 配置坐標軸,圖例,tooltip, annotation 的主題樣式 |
| labels | object | 配置 Geometry 下 label 的主題樣式 |
| innerLabels | object | 配置 Geometry 下展示在圖形內部的 labels 的主題樣式 |
| pieLabels | object | 配置餅圖 labels 的主題樣式 |
3、使用方式:
{theme: {
colors10: ['#FF6B3B', '#626681', '#FFC100', '#9FB40F', '#76523B', '#DAD5B5', '#0E8E89', '#E19348', '#F383A2', '#247FEA'] } }
更新日志
Documentation Changes
圖表組件 api 整理 (#2290) (97c520df)
add pyg2plot (#2284) (2a6b76c7)
AxisCfg API title.title => title.text (#2277) (067f6b02)
New Features
雙軸圖新增 slider (#2287) (0276528d)
sankey: add nodeWidth, nodePadding options (#2295) (947889b3)
animation: 增加動畫文檔和 demo & 多圖層圖表支持分 view 動畫 (#2291) (9e62cb91)



網友評論