G2Plot是簡單、易用、并具備一定擴展能力和組合能力的統(tǒng)計圖表庫,內(nèi)置的是業(yè)務中使用量占比超過 90% 的常規(guī)統(tǒng)計圖表。支持用戶對其進行自定義開發(fā),軟件配置項優(yōu)化精簡,僅需幾行代碼輕松生成圖表。使用起來也非常方便,可以通過將腳本下載到本地也可以直接引入在線資源。同時軟件還在不斷地進行升級,更多高級圖表功能用戶可以自行體驗一下。
軟件特色
開箱即用
配置項優(yōu)化精簡,僅需幾行代碼輕松生成圖表
默認好用
即使你是可視化或設計小白,也能制作優(yōu)雅、標準的統(tǒng)計圖表
響應式圖表
保證圖表在任何顯示尺寸、任何數(shù)據(jù)狀態(tài)下的可讀性
圖表實驗室
來這里嘗試一下我們正在開發(fā)中的高級圖表功能
修改柱狀圖顏色
柱狀圖用于描述分類數(shù)據(jù)之間的對比,如果我們把時間周期,如周、月、年,也理解為一種分類數(shù)據(jù)。那么要如何自定義柱狀圖的顏色呢,一起來看看修改方法。
1、指定點的顏色。如沒有配置 colorField,指定一個單值即可。對 colorFiled 進行了配置的情況下,即可以指定一系列色值,也可以通過回調(diào)函數(shù)的方法根據(jù)對應數(shù)值進行設置。
默認配置:采用 theme 中的色板。
// 設置單一顏色
{
color: '#a8ddb5'
}
// 設置多色
{
colorField: 'type', // 部分圖表使用 seriesField
color: ['#d62728', '#2ca02c', '#000000'],
}
// Function
{
colorField: 'type', // 部分圖表使用 seriesField
color: ({ type }) => {
if(type === 'male'){
return 'red';
}
return 'yellow';
}
}
自定義圖例
圖例是圖表的輔助元素,使用顏色、大小、形狀區(qū)分不同的數(shù)據(jù)類型,用于圖表中數(shù)據(jù)的篩選。用戶可以在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 | - | 動畫參數(shù)配置,當且僅當 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[] | - | 用戶自己配置圖例項的內(nèi)容。詳見 items 配置 |
自定義主題
1、內(nèi)置主題
目前默認的內(nèi)置主要要兩套:default和dark
2、主題屬性
除了使用內(nèi)置的 default 和 dark 主題之外,還可以通過設置主題屬性來修改部分主題內(nèi)容:
下表列出了組成主題的大配置項上的具體屬性:
主題屬性 | 類型 | 描述 |
---|---|---|
defaultColor | string | 主題色 |
padding | number | number[] |
fontFamily | string | 圖表字體 |
colors10 | string[] | 分類顏色色板,分類個數(shù)小于 10 時使用 |
colors20 | string[] | 分類顏色色板,分類個數(shù)大于 10 時使用 |
columnWidthRatio | number | 一般柱狀圖寬度占比,0 - 1 范圍數(shù)值 |
maxColumnWidth | number | 柱狀圖最大寬度,像素值 |
minColumnWidth | number | 柱狀圖最小寬度,像素值 |
roseWidthRatio | number | 玫瑰圖占比,0 - 1 范圍數(shù)值 |
multiplePieWidthRatio | number | 多層餅圖/環(huán)圖占比,0 - 1 范圍數(shù)值 |
geometries | object | 配置每個 Geometry 下每個 shape 的樣式,包括默認樣式以及各個狀態(tài)下的樣式 |
components | object | 配置坐標軸,圖例,tooltip, annotation 的主題樣式 |
labels | object | 配置 Geometry 下 label 的主題樣式 |
innerLabels | object | 配置 Geometry 下展示在圖形內(nèi)部的 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)
標簽: 圖表制作 圖表統(tǒng)計
下載地址
網(wǎng)友評論