javascript - c3.js一致的配色方案

Question

我正在使用c3.js从JSON数据生成2个饼图。数据标签相同，但是两个图表的值不同，因此我得到了差异切片。不幸的是，我也为每个标签设置了不同的配色方案。

有没有办法为两个图表设置一致的配色方案？

我尝试了this，但我想从JSON获取此数据，而不是对颜色代码进行硬编码。

Answer 1

两个数据集中的数据点数量是否相同？标签顺序是否一致？

我假设没有，否则模式数组应该工作。检查您在JSON对象中获得的数据，并查看它们的顺序是否相同。也许一个简单的排序（按标签）会起作用，因为这样可以使它们以正确的顺序排列。

一种选择是设置颜色字典对象，然后在该字典中查找数据点的索引。但是，如果标签的顺序不同，则仅查找索引将不起作用，因为它将返回不同的值。 （我认为这实际上是模式数组正在执行的操作）。因此，您需要存储然后在字典中查找标签。

实际上是这样的：

var colorDictionary = { "label1": "red", "label2": "green" }

说您的原始数据在这样的数组中：

var data1 = [{key: "label1", value: 0.5}, {key: "label2", value: 0.9}]
var data2 = [{key: "label2", value: 0.9}, {key: "label1", value: 1.9}]

然后，您将使用颜色回调，如下所示：

//... for chart based on data1
data: {
   color: function (color, d) {
      return d.id ? colorDictionary[data1[d.index].label] : color;
   }
}

和

//... for chart based on data2
data: {
   color: function (color, d) {
      return d.id ? colorDictionary[data2[d.index].label] : color;
   }
}