DC.js-colorMixin介绍

DC.js-colorMixin是一种DC.js图表库的mixin，它提供了配置和使用颜色方案的简单方法，使创建和定制DC.js图表更加容易。

特性

• 提供多种颜色配色方案
• 支持使用自定义颜色
• 允许在图表之间共享颜色配置
• 提供灵活的API以动态更改颜色配置

使用

要使用DC.js-colorMixin，你需要扩展你的DC.js图表。在继承之前，通过调用colorMixin来将colorMixin add至你的Protype。这样，你就可以使用混合中提供的各种方法来创建和定制您的图表的颜色方案。

MyChart.prototype = Object.create(dc.baseMixin)
.mixin(dc.colorMixin) //添加colorMixin
//continue with chart implementation

配置

Color Configurations

DC.js-colorMixin提供了一组默认颜色配置，它们通过调用colorMixin.colors方法进行访问。你可以像这样指定这些方案。

BarChart.colors(d3.scale.category20b())

此外，您还可以传递一个自定义颜色配置数组到colors方法中。

BarChart.colors(["#1f77b4", "#2ca02c", "#aec7e8", "#ff7f0e"])

总而言之，该方法提供了一种灵活的方式来定义颜色方案。

Color Sharing

如果你想在图表之间共享颜色配置，你可以使用colorMixin的静态reusableColors方法。这种方法允许您将颜色方案保存到可重用对象中，并在需要时直接应用它们。

var myColors = dc.colorMixin.reusableColors().range(["#1f77b4", "#2ca02c", "#aec7e8", "#ff7f0e"])
BarChart.colors(myColors)
PieChart.colors(myColors)

Dynamic Color Manipulation

要动态更新颜色配置，您可以直接修改分配给chart.colors的比例尺，或者使用chart.colors().range()方法。

myColors.range(["#d62728", "#2ca02c", "#f7b6d2"," #ff7f0e"])

要从图表中排除颜色，请调用chart.colors(null)。这样将禁用该图表的颜色缩放。

结论

DC.js-colorMixin提供了一个方便的方式来创建和定制颜色方案，从而强化了创建DC.js图表的能力。具有其灵活性和多功能性，它是DC.js中不可或缺的插件之一。