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

我有一个类似于this在线示例的C3饼图。在我的情况下，我根据传入的外部数据设置data.colors。如何在C3图表上动态设置饼图文字颜色

我的设置如下所示（我通过在颜色使用）......

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

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

有没有人知道一种方法来做到这一点？最重要的是，我无法控制进入的颜色，并且只要有颜色数据就需要在代码中设置文本颜色。

在此先感谢您的帮助！

来源

2017-03-22 peterc

可以请你创建的jsfiddle为你的代码？ –

这可以通过css来实现，在你想要的例子中你想要像'.c3-chart-arc text {fill：black;}'，更多的类可以在[reference]中找到（http://c3js.org/ reference.html）（底部）。您始终可以通过浏览器中的开发工具检查图表。在最糟糕的情况下，您必须按照d3直接操作图表。 – Akoya

使用onrendered:选项，在C3配置

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

构造一个新的颜色显示出来反对饼色
使用类定义将其应用于右段的文本（可用于颜色映射，饼图段元素类都包含数据系列的名称）

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

来源

2017-03-23 12:03:10 mgraham

真棒，这是它。出于某种原因，对我来说'hsl.l = hsl.l> 0.5？ 0：1; '似乎从未回到黑色（但它在你的例子中）！但是，这很好，我只是将'colEntry.value'传递给我自己现有的颜色对比函数，并且完美地工作。谢谢！ – peterc

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

回答

相关问题