添加彩色框作为莫里斯图的图例

Question

我正在尝试将彩色框添加为莫里斯图的图例。下图为C3图例。但我无法找到一种方法以同样的方式添加莫里斯。

有人可以帮忙吗？

目前，莫里斯传奇的代码如下：

Morris 的代码 - jQuery

var chart=  Morris.Line({
    element: 'status-req',
    data: <?=json_encode($jsonDataArray)?>,     
    xkey: 'y',
    ykeys: <?=json_encode($deliveryAspect['statusKeys'])?>,
    labels:  <?=json_encode($deliveryAspect['statusLabels'])?>,
    hideHover: 'auto',
    resize: true,      
    smooth:true       
});

chart.options.labels.forEach(function(label, i) {
    var legendItem = $('<span align="center"></span> ').text(label).css('color', chart.options.lineColors[i])
    $('#legend').append(legendItem);
});

Answer 1

使用下面的代码解决了该问题。CSS

.mbox {   
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 10px 55px 10px 25px;
    padding-left: 4px;
}

jQuery

chart.options.labels.forEach(function(label, i){
    var legendlabel=$('<span style="display: inline-block;">'+label+'</span>')
    var legendItem = $('<div class="mbox"></div>').css('background-color', chart.options.lineColors[i]).append(legendlabel)
    $('#legend').append(legendItem)   
})