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

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

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

例如，在元素上定义全局图表配色：

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

对应的效果图如下：

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

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

<body style="background-image: url(bg.png)"
    dg-chart-theme="{
        color:'#FFF',
        backgroundColor:'transparent',
        actualBackgroundColor:'#17336c',
        borderWidth:'2px'
    }">

也可以为单个图表

元素添加dg-chart-theme属性，仅定义此图表的主题，例如：

<div dg-chart-widget="..."
    dg-chart-theme="{backgroundColor:'green',color:'yellow'}">
</div>

对应的效果图如下（第一个图表）：

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

另外，设置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'
    }">

对应的效果图如下：

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