条形图颜色c3.js

Question

我在c3.js (here's a fiddle)以下条形图：

var chart = c3.generate({ 

    data: { 
    x: 'Letter', 
    columns: 
    [ 
     ['Letter', 'A','B','C','D'], 
     ['value', 25,50,75,100] 
    ], 

    type: 'bar', 

     colors: { 
     value: '#FF0000' 
    }, 

    }, 
    axis: { 
    x: { 
     type: 'category' 
    } 
    }, 
    legend: { 
    show: false 
    } 
}); 

这台所有的酒吧为红色。我想要的是从FF0000到10FF00的条纹的颜色为this gradient，我相信这只是将颜色的十进制值加上4096的增量。

我想渐变从50开始到100结束（也就是说，任何绿色和以下的将是纯红色FF0000，并且100将是绿色10FF00）。

我试图按照this example来设置c3.js图上数据点的颜色值。在该示例中，data3的值随着其值上升而变暗。我一直在尝试修改color: function (color, d)，但似乎无法让它做任何我想做的事情。

任何帮助，将不胜感激。谢谢！

Answer 1

我不确定你在color: function里面做了什么，但它是设置它的正确方法。关于你想要的梯度，它不能通过增加十六进制值来实现，因为从黄色变为绿色需要减小该值。下面的例子去从红色到黄色：

var chart = c3.generate({ 
    data: { 
    x: 'Letter', 
    columns: 
    [ 
     ['Letter', 'A','B','C','D'], 
     ['value', 25,50,75,100] 
    ], 
    type: 'bar', 
    colors: { 
     value: function(d) { 
     return '#'+(0xff0000+(d.value-25)*256*3).toString(16); 
     } 
    }, 
    }, 
    axis: { 
    x: { 
     type: 'category 
    } 
    }, 
    legend: { 
    show: false 
    } 
}); 

fiddle