如何在 C3 图表上动态设置饼图文本颜色

Question

我有一个类似于this 在线示例的C3 饼图。就我而言，我根据传入的外部数据设置 data.colors 。

我的设置如下所示（我传入要使用的颜色）...

        this.pieChart = generate({
            data: {
              columns: columns,
              colors: colours,
              type: 'pie',
              onclick: (e) => {
                this.handlePieClick(e.id);
              },
            },
            bindto: '#pie-chart',
            tooltip: {
              show: false
            },
            transition: {
              duration: 1000
            },
            legend: {
              item: {
                onclick: id => {
                  this.handlePieClick(id);
                }
              }
            },
          });

我的应用无法控制这些颜色。当颜色较浅时，很难看到白色文字。我可能混合了浅色和深色。我需要做的是检查每种颜色，然后能够为每个饼图的文本颜色设置白色或黑色的文本，但是我看不到我可以覆盖的回调函数来执行此操作。

有谁知道这样做的方法吗？最重要的是我无法控制输入的颜色，一旦我有了颜色数据，就需要在代码中设置文本颜色。

提前感谢您的帮助！

Answer 1

在 c3 配置中使用onrendered: 选项

在那里，循环遍历颜色，并为每个

1. 构造一种新的颜色来显示饼图的颜色

2. 使用类定义将其应用于右段中的文本（因为颜色图和饼图段元素类都包含数据系列的名称）

http://jsfiddle.net/shxLfss3/2/

onrendered: function () {
    var colEntries = d3.entries(this.config.data_colors);
    colEntries.forEach (function (colEntry) {
        // get pie segment colour, make a contrasting colour from it
        var hsl = d3.hsl(colEntry.value);
        hsl.l = hsl.l > 0.5 ? 0 : 1;    // make black if light, white if dark
        var newCol = hsl.toString();
        // apply that color to the segmenbt's text
        var segment = d3.select(this.config.bindto+" .c3-chart-arc.c3-target-"+colEntry.key);
        segment.select("text").style("fill", newCol);
    }, this);
}