如何在 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:选项

在那里，遍历颜色，并且对于每个

构造一种与饼图颜色相对应的新颜色
使用 class 定义将其应用于右段中的文本（可行，因为颜色图和饼图段元素 classes 都包含数据系列)

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

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

How to dynamically set pie piece text colour on a C3 chart

javascript

c3.js