棒グラフの個々の棒の色を変更する方法。
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未満のバーは赤色である必要があります。
そのよう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はグリーンだと思いました。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加