superset二次開發-修改圖表顏色

方式一、添加color scheme

需要修改的文件：superset/assets/javascripts/modules/colors.js

代碼：

export const newColorScheme = [

"#a4f2b8",

"#abc8fa",

"#c8b4f8",

"#e6eb9e"

];

export const ALL_COLOR_SCHEMES = {

bnbColors,

d3Category10,

...

newColorScheme

};

但是，有的圖表通過color scheme修改了，但是沒有修改，比如sunburst；

方式二、修改圖表的js文件顯示邏輯（拿sumburst舉例了）

需要修改的文件：superset/assets/visualizations/sunburst.js

修改的代碼（第352行）：

if (fd.metric !== fd.secondary_metric) {

// colorByCategory = false;

ext = d3.extent(nodes, d => d.m2 / d.m1);

colorScale = d3.scale.linear()

.domain([ext[0], ext[0] + ((ext[1] - ext[0]) / 2), ext[1]])

.range([#00D1C1, white, #FFB400]);

}

解釋：主要就注釋了一句代碼

// colorByCategory = false;

從這個文件來看，這段代碼的意義就是確定顏色的獲取方式是否來自category，那麼我既然希望代碼獲取來自category，那麼，就不修改初始值，因為初始值就是true；

效果：

用了以上兩種方式，基本上都能修改了，但是還有一種，是官方在配置slice的時候，根本就沒有color scheme可選的，比如table view，真的是很讓人吐槽的顏色，這個時候怎麼改呢？

方式三、直接修改js代碼（拿table view舉例）

文件：superset/assets/visualizations/table.js

代碼：

1、在table.append(tbody)這句代碼之前添加代碼：

const colors = ["#2355ac","#007fa8","#26A4D6","#5fc3ea","#4a94ce","#699fff","#abc8fa"];

var count = 0;

table.append(tbody)

2、原.style(background-image, function (d) {});方法修改為：

.style(background-image, function (d) {

if (d.isMetric) {

count += 1;

const perc = Math.round((d.val / maxes[d.col]) * 100);

d.color = colors[count];

return (`linear-gradient(to left, ${d.color} ${perc}%, ` +

`rgba(0,0,0,0.01) ${perc}%`);

}

return null;

})

修改後的效果為：

推薦閱讀：