温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2021-12-24 16:48:05 来源:亿速云 阅读:306 作者:小新 栏目:大数据

这篇文章主要介绍DataGear如何自定义数据可视化看板的图表主题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

DataGear看板的dg-chart-theme属性,提供了简单且强大的自定义图表主题功能。

通常,只需要设置其color、backgroundColor、actualBackgroundColor值即可,看板会根据它们自动生成标题、图例、提示框、高亮框等相关配色。

例如,在<body>元素上定义全局图表配色:

<body 
    dg-chart-theme="{
		color:'#FFF',
		backgroundColor:'#17336c',
		borderWidth:'2px'
	}">

对应的效果图如下:

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

当看板有背景图片时,通常希望图表背景色是透明的,此时应设置actualBackgroundColor为与背景图片一致的颜色,例如:

<body 
    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>

对应的效果图如下(第一个图表):

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

另外,设置dg-chart-theme的graphColors值,可以自定义图表系列条目颜色序列,设置graphRangeColors值,则可以定义图表值域映射颜色(地图区域颜色),例如:

<body 
    dg-chart-theme="{
		color:'#FFF',
		backgroundColor:'transparent',
		actualBackgroundColor:'#17336c',
		graphColors: ['#EE7942', '#FFFF00', '#EE1289'],
		graphRangeColors: ['#FFFF00', '#EE7942'],
		borderWidth:'2px'
	}">

对应的效果图如下:

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

以上是“DataGear如何自定义数据可视化看板的图表主题”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI