第1章 概述

SaCa DataViz在页面提供了6种配色方案,但是在具体的项目实施过程中,通常需要将DataViz与业务系统做一个集成,因此在配色上,也需要进行统一。本文档提供给DataViz开发人员一种调整DataViz配色的方法。

1.1 配色实现

SaCa DataViz的主题存储在其支撑库的dv_theme表中,如下:

./color_scheme/1

其中,每一条数据对应一种主题配色,主题的配色主要存储在content字段,其数据结构如下:

{
    "qualitative": [
        "#1776B6",
        "#D7241F",
        "#FF7F00",
        "#24A322",
        "#9564BF",
        "#7F7F7F"
    ],
    "sequential": [
        "#1776B6",
        "#3E8DC2",
        "#65A5CD",
        "#8DBCD9",
        "#84D4E4",
        "#DBE8F0"
    ],
    "diverging": [
        "#00471D",
        "#228D47",
        "#3AB692",
        "#A3E2D7",
        "#CAF7F2",
        "#FFFFFD"
    ],
    "background": "#F7F7F7",                    //背景色,保留字段
    "backgroundImage": "",                      //背景图片,保留字段
    "text": "#000",                               //文字
    "title": "#000",                               //标题
    "subtitle": "#333",                           //子标题
    "legendText": "#222",                        //图例文字
    "tooltipBackground": "rgba(10,10,10,0.7)",   //提示框背景色
    "tooltipBorder": "#111",                      //提示框边框色
    "tooltipText": "#fff",                          //提示框文字
    "axisLine": "#333",                           //坐标轴
    "axisText": "#111",                           //坐标轴文字
    "axisGrid": "#ccc",                            //坐标轴grid
    "axisTick": "#222",                           //坐标轴刻度
    "visualMap": [                                //visualMap过渡色
        "#DBE8F0",
        "#65A5CD",
        "#1776B6"
    ],
    "widgetBorder": "#ddd",                      //widget边框色
    "widgetBackground": "rgba(238,238,238,.7)" //widget背景色
}

DataViz的配色方案中,主要分为两大块,一是主题色板,二是细节颜色。主题色板是指content字段中的qualitative、sequential、diverging,其中qualitative为分类色,主要用于具备分类特征的图表,如柱图、饼图等绝大多数图表;sequential为渐变色,主要用于具备渐变效果的图表,如地图、热力图等;diverging为对比色,保留;其余字段参考注释。

如若有需要,按照以上结构修改后重启服务即可,另外,需要重新制作UI图片,图片存储位置:

dataviz_file/file/theme中

results matching ""

    No results matching ""