使用c3js更改條形圖中單個條的顏色

Question

如何更改條形圖中單個條的顏色。

var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['data1', 30, 20, 50, 40, 60, 50] 

     ], 
     type: 'bar', 
     colors: { 
      data1: '#ff0000' 
     }, 
     color: function (color, d) { 

      return d.id && d.id === 'data1' ? d3.rgb(color).darker(d.value/120) : color; 
     } 
    } 
}); 

在這裏，所有值大於45的條應該是綠色的，而低於45的條應該是紅色的。

Answer 1

只是要data.colors.data1的功能，像這樣

var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['data1', 30, 20, 50, 40, 60, 50] 

     ], 
     type: 'bar', 
     colors: { 
      data1: function(d) { 
       return (d.value >= 45) ? '#00ff00': '#ff0000'; 
      } 
     } 
    }, 
    legend: { 
     show: false 
    }, 
    // take care of color in tooltip 
    tooltip: { 
     contents: function (d, defaultTitleFormat, defaultValueFormat, color) { 
      color = function() { 
       return (d[0].value >= 45) ? '#00ff00' : '#ff0000'; 
      }; 
      return chart.internal.getTooltipContent.call(this, d, defaultTitleFormat, defaultValueFormat, color) 
     } 
    } 
}); 

我認爲45是綠色的方式。

---

小提琴 - http://jsfiddle.net/vc1Lq1um/