Bargraph Farben basierend auf dem Wert in c3.js

Question

Ich habe die folgende Balkendiagramm in 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 
    } 
}); 

Diese alle Bars rot setzt. Was ich möchte, ist die Farben der Bars this gradient von FF0000 bis 10FF00, die ich glaube nur in Schritten von 4096 auf den Dezimalwert der Farbe ist.

Ich möchte, dass der Gradient bei 50 beginnt und bei 100 endet (das heißt, alles grün und unten wäre rot FF0000, und 100 wäre grün 10FF00).

Ich habe versucht, this example zu folgen, um die Farbe eines Datenpunkts auf einem c3.js-Diagramm basierend auf seinem Wert festzulegen. In diesem Beispiel wird der Wert data3 mit zunehmendem Wert abgedunkelt. Ich habe versucht, die color: function (color, d) zu ändern, aber ich kann nicht scheinen, es zu tun, was ich will.

Jede Hilfe wäre willkommen. Vielen Dank!

Answer 1

Ich bin mir nicht sicher, was Sie innerhalb color: function getan haben, aber es ist der richtige Weg, um es einzurichten. In Bezug auf Ihren gewünschten Gradient kann dies nicht erreicht werden, indem einfach der Hexadezimalwert erhöht wird, da der Übergang von Gelb zu Grün eine Verringerung des Werts erfordert. Das folgende Beispiel geht von rot nach gelb:

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