DataGear 自定义数据可视化看板的图表主题
程序员文章站
2022-03-22 16:00:39
...
DataGear看板的dg-chart-theme属性，提供了简单且强大的自定义图表主题功能。
通常，只需要设置其color、backgroundColor、actualBackgroundColor值即可，看板会根据它们自动生成标题、图例、提示框、高亮框等相关配色。
例如，定义全局图表配色：
<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'
}">
也可以为单个图表<div>元素添加dg-chart-theme，仅定义此图表的主题，例如：
<div dg-chart-widget="fb360c3e3173579036a4"
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'
}">
对应的效果图如下：
官网地址：http://www.datagear.tech
上一篇： 公众号内容为什么加载不出来？
下一篇： Nanite：自组装Ruby守护集群
推荐阅读
-
FusionCharts中文教程：自定义图表的X轴和Y轴 fusioncharts教程图表工具数据可视化工具
-
FusionCharts中文教程：自定义图表的标题和子标题 fusioncharts图表JavaScript图表图表控件图表工具数据可视化
-
FusionCharts中文教程：自定义图表的X轴和Y轴 fusioncharts教程图表工具数据可视化工具
-
DataGear 自定义数据可视化看板的图表主题
-
DataGear 制作轮播表格行间可停顿的数据可视化看板
-
DataGear 制作支持全国、省、市三级数据钻取效果的地图数据可视化看板
-
FusionCharts中文教程：自定义图表的双Y轴 fusioncharts教程fusioncharts图表数据可视化图表控件图表解决方案
-
FusionCharts中文教程：自定义图表的标题和子标题 fusioncharts图表JavaScript图表图表控件图表工具数据可视化