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

时间:2015-01-13 15:37:37

标签: javascript d3.js 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";
    })

这是颜色设置:

var color = d3.scale.ordinal().domain(["green","yellow", "blue", "red"])
                            .range(["#00FF00","#FFFF00","#3232ff", "#FF0000"]);

现在我想在此行图中添加一个图例栏以突出显示颜色的域。我试图加入

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

但它不起作用。

我该怎么做?

1 个答案:

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