條形圖顏色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