Javascript 如何将图例栏添加到行图表Dc.js

我有一个使用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";
    })

现在，我想在这个行图表中添加一个图例条，以突出显示颜色的域。我试着包括

.legend(dc.legend().y(475).itemHeight(13).gap(5))   

但它不起作用

---

我该怎么做呢？

这与这个问题有关：谢谢戈登

我通过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>

---

抱歉，行图表看起来不像是传奇式的-添加了一个问题。

<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;
}