DataGear看板的dg-chart-theme屬性,提供了簡單且強大的自定義圖表主題功能。
通常,只需要設置其color、backgroundColor、actualBackgroundColor值即可,看板會根據它們自動生成標題、圖例、提示框、高亮框等相關配色。
例如,在<body>元素上定義全局圖表配色:
<body style="background-color: #17336c"
dg-chart-theme="{
color:'#FFF',
backgroundColor:'#17336c',
borderWidth:'2px'
}">
對應的效果圖如下:
當看板有背景圖片時,通常希望圖表背景色是透明的,此時應設置actualBackgroundColor爲與背景圖片一致的顏色,例如:
<body style="background-image: url(bg.png)"
dg-chart-theme="{
color:'#FFF',
backgroundColor:'transparent',
actualBackgroundColor:'#17336c',
borderWidth:'2px'
}">
也可以爲單個圖表<div>元素添加dg-chart-theme屬性,僅定義此圖表的主題,例如:
<div dg-chart-widget="..."
dg-chart-theme="{backgroundColor:'green',color:'yellow'}">
</div>
對應的效果圖如下(第一個圖表):
另外,設置dg-chart-theme的graphColors值,可以自定義圖表系列條目顏色序列,設置graphRangeColors值,則可以定義圖表值域映射顏色(地圖區域顏色),例如:
<body style="background-image: url(bg.png)"
dg-chart-theme="{
color:'#FFF',
backgroundColor:'transparent',
actualBackgroundColor:'#17336c',
graphColors: ['#EE7942', '#FFFF00', '#EE1289'],
graphRangeColors: ['#FFFF00', '#EE7942'],
borderWidth:'2px'
}">
對應的效果圖如下:
源碼地址:
Gitee:https://gitee.com/datagear/datagear
Github:https://github.com/datageartech/datagear
大屏模板地址:https://gitee.com/datagear/DataGearDashboardTemplate