我有一个行图表,使用colorAccessor()函数根据百分比突出显示每一行:
.colorAccessor(function(d) {
var percentage = d.percentage;
if(percentage >= 100)
return "green";
else if(70 <= percentage && percentage < 100)
return "yellow";
else if (0 <= percentage && percentage < 70)
return "red";
return "blue";
})
这是颜色设置:
var color = d3.scale.ordinal().domain(["green","yellow", "blue", "red"])
.range(["#00FF00","#FFFF00","#3232ff", "#FF0000"]);
现在我想在此行图中添加一个图例栏以突出显示颜色的域。我试图加入
.legend(dc.legend().y(475).itemHeight(13).gap(5))
但它不起作用。
我该怎么做?
答案 0 :(得分:0)
这与此问题有关:https://github.com/dc-js/dc.js/issues/836(谢谢戈登!)
我通过HTML为图例栏创建了一个临时解决方案:
<div id='dc-legend'>
<div id = "dc-legend-item">
<div id = "dc-legend-item-color" style="background-color: #00FF00;">
</div>
<span id = "dc-legend-item-text"> Percentage >= 100% </span>
</div>
<div id = "dc-legend-item">
<div id = "dc-legend-item-color" style="background-color: #FFFF00;">
</div>
<span id = "dc-legend-item-text"> 70% <= Percentage < 100% </span>
</div>
<div id = "dc-legend-item">
<div id = "dc-legend-item-color" style="background-color: #FF0000;">
</div>
<span id = "dc-legend-item-text"> 0 <= Percentage < 70% </span>
</div>
<div id = "dc-legend-item">
<div id = "dc-legend-item-color" style="background-color: #3232ff;">
</div>
<span id = "dc-legend-item-text"> No goals set </span>
</div>
</div>
样式看起来像:(取决于你想要的东西)
#dc-legend-item-color{
height: 20px; width: 20px;
margin-top:2px;
float:left;
}
#dc-legend-item-text{
margin-left: 20px;
}
#dc-legend {
width: 300px;
font-family: 'PT Sans', sans-serif;
font-size:13px;
float: right;
margin-left: 100px;
margin-top: 20px;
}