更改 dc.js 图表颜色
Change dc.js chart colours
为什么所有 dc.js 图表都是蓝色的?我该如何改变它?浏览了 dc.css,没有看到蓝色的用处!
我尝试更改了很多 fill
属性。我唯一成功的是条形图。仍然没有饼图的线索。
dc.js 中的颜色(通常在 d3 中很常见)是根据数据动态计算的,这就是为什么您通常不会在 CSS 中找到它们的原因。这需要一些时间来适应。
对于条形图,颜色基于堆栈数。在饼图中,它们基于饼图切片。
然后他们通过 d3 比例来分配实际颜色。通常,您希望使用 chart.ordinalColors 将色标替换为您自己的颜色。
所以,例如使用其中一种 colorbrewer 调色板:
chart.ordinalColors(['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628']);
等价地,因为 colorbrewer 调色板包含在 D3v4+ 中:
chart.ordinalColors(d3.schemeSet1);
(Lots of wonderful color schemes in d3-scale-chromatic.)
在下面,ordinalColors
正在这样做:
chart.colors(d3.scaleOrdinal().range(d3.schemeSet1));
因此,如果您想控制颜色的顺序,您也可以指定域:
chart.colors(d3.scaleOrdinal().domain([5,4,3,2,1]).range(d3.schemeSet1));
为什么所有 dc.js 图表都是蓝色的?我该如何改变它?浏览了 dc.css,没有看到蓝色的用处!
我尝试更改了很多 fill
属性。我唯一成功的是条形图。仍然没有饼图的线索。
dc.js 中的颜色(通常在 d3 中很常见)是根据数据动态计算的,这就是为什么您通常不会在 CSS 中找到它们的原因。这需要一些时间来适应。
对于条形图,颜色基于堆栈数。在饼图中,它们基于饼图切片。
然后他们通过 d3 比例来分配实际颜色。通常,您希望使用 chart.ordinalColors 将色标替换为您自己的颜色。
所以,例如使用其中一种 colorbrewer 调色板:
chart.ordinalColors(['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628']);
等价地,因为 colorbrewer 调色板包含在 D3v4+ 中:
chart.ordinalColors(d3.schemeSet1);
(Lots of wonderful color schemes in d3-scale-chromatic.)
在下面,ordinalColors
正在这样做:
chart.colors(d3.scaleOrdinal().range(d3.schemeSet1));
因此,如果您想控制颜色的顺序,您也可以指定域:
chart.colors(d3.scaleOrdinal().domain([5,4,3,2,1]).range(d3.schemeSet1));