如何在C3圖表上動態設置餅狀文本的顏色

Question

我有一個類似於此在線示例的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);
}