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

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

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

Adding coloured box as legends to morris graph

javascript

jquery

morris.js