DataGear 自定义数据可视化看板的图表主题

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 }">

对应的效果图如下:

官网地址:http://www.datagear.tech

源码地址:

Gitee:https://gitee.com/datagear/datagear

Github:https://github.com/datageartech/datagear

大屏模板地址:https://gitee.com/datagear/DataGearDashboardTemplate

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

DataGear 制作支持全国、省、市三级数据钻取效果的地图数据可视化看板

通过DataGear(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fdatagear.tech%2F)的参数化数据集、图表联动和看板API功能,可以很方便地制作支持数据钻取效果的数据可视化看板。首先,以上级地区名为参数,新建一个参数化SQL数据集:SELECT

DataGear 制作时序数据可视化看板

通过DataGear(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fdatagear.tech%2F)的参数化数据集和看板API功能,可以很方便地制作包含时序图表的看板。首先,以时间为参数,新建一个参数化SQL数据集:SELECTCOL_TIME,

DataGear 2.2.0 发布,数据可视化分析平台

DataGear(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.datagear.tech%2F) 2.2.0 发布,带来诸多新增功能,具体更新内容如下:新增:内置图表新增水球图;新增:看板编辑页面新增搜索功能;新增:图表/看板展示页面新增数据透视