Question

我有一个行图表，使用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))

但它不起作用。

我该怎么做？

Answer 1

这与此问题有关：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;
}

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

1 个答案: