DataGear看板的dg-chart-theme属性,提供了简单且强大的自定义图表主题功能。
通常,只需要设置其color、backgroundColor、actualBackgroundColor值即可,看板会根据它们自动生成标题、图例、提示框、高亮框等相关配色。
例如,在<body>元素上定义全局图表配色:
1<body style="background-color: #17336c" 2 dg-chart-theme="{ 3 color:'#FFF', 4 backgroundColor:'#17336c', 5 borderWidth:'2px' 6 }">
对应的效果图如下:

当看板有背景图片时,通常希望图表背景色是透明的,此时应设置actualBackgroundColor为与背景图片一致的颜色,例如:
1<body style="background-image: url(bg.png)" 2 dg-chart-theme="{ 3 color:'#FFF', 4 backgroundColor:'transparent', 5 actualBackgroundColor:'#17336c', 6 borderWidth:'2px' 7 }">
也可以为单个图表<div>元素添加dg-chart-theme属性,仅定义此图表的主题,例如:
1<div dg-chart-widget="..." 2 dg-chart-theme="{backgroundColor:'green',color:'yellow'}"> 3</div>
对应的效果图如下(第一个图表):

另外,设置dg-chart-theme的graphColors值,可以自定义图表系列条目颜色序列,设置graphRangeColors值,则可以定义图表值域映射颜色(地图区域颜色),例如:
1<body style="background-image: url(bg.png)" 2 dg-chart-theme="{ 3 color:'#FFF', 4 backgroundColor:'transparent', 5 actualBackgroundColor:'#17336c', 6 graphColors: ['#EE7942', '#FFFF00', '#EE1289'], 7 graphRangeColors: ['#FFFF00', '#EE7942'], 8 borderWidth:'2px' 9 }">
对应的效果图如下:

源码地址:
Gitee:https://gitee.com/datagear/datagear