Question

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

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

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

Answer 1

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

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

一个选项是设置一个颜色字典对象，然后在该字典中查找数据点的索引。但是，如果标签的顺序不同，那么仅查找索引就不会起作用，因为它会返回不同的值。（我认为这实际上是模式数组正在做的事情）。因此，您需要存储＆amp;然后在字典中查找标签。

实际上是这样的：

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;
   }
}

Answer 2

两个或多个图表中的列的颜色相同

var chart1 = c3.generate({....})

if (chart1.internal.config.data_colors['YourColumnName1'] != undefined) {
        chart.internal.config.data_colors['YourColumnName1'] = '#ff0000'
    }
if (chart1.internal.config.data_colors['YourColumnName2'] != undefined) {
        chart.internal.config.data_colors['YourColumnName2'] = '#ffff00'
    }

chart1.internal.color = chart.internal.generateColor();
chart1.flush();

第二张图

var chart2 = c3.generate({....})

if (chart.internal.config.data_colors['YourColumnName1'] != undefined) {
        chart.internal.config.data_colors['YourColumnName1'] = '#ff0000'
    }
if (chart2.internal.config.data_colors['YourColumnName2'] != undefined) {
        chart.internal.config.data_colors['YourColumnName2'] = '#ffff00'
    }
if (chart2.internal.config.data_colors['YourColumnName3'] != undefined) {
        chart.internal.config.data_colors['YourColumnName3'] = '#ff00ff'
    }

chart2.internal.color = chart.internal.generateColor();
chart2.flush();

两个图表都会显示YourColumnName1的相同颜色。

c3.js一致的配色方案

2 个答案: