Question

我正在尝试将两个Morris图表组合在一起，即同一元素（框架）中的条形图和折线图，但是当我尝试在一个元素中应用两个morris图表时，我的图表无法正确显示。在这里，我使用的代码：

var month_data = [
    {"period": '2010', "licensed": 100, "sorned": 60},
    {"period": '2011', "licensed": 75, "sorned": 29},
    {"period": '2012', "licensed": 50, "sorned": 18},
    {"period": '2013', "licensed": 75, "sorned": 61},
    {"period": '2014', "licensed": 50, "sorned": 67},
    {"period": '2015', "licensed": 75, "sorned": 7},
    {"period": '2016', "licensed": 100, "sorned": 60}
];
Morris.Line({
    element: 'bar-example',
    data: month_data,
    xkey: 'period',
    ykeys: ['licensed', 'sorned'],
    zkeys: 3,
    labels: ['Licensed', 'SORN'],
    smooth: false
});

Morris.Bar({
    element: 'bar-example',
    data: [
        { y: '2010', a: 100, b: 90 },
        { y: '2011', a: 75,  b: 65 },
        { y: '2012', a: 50,  b: 40 },
        { y: '2013', a: 75,  b: 65 },
        { y: '2014', a: 50,  b: 40 },
        { y: '2015', a: 75,  b: 65 },
        { y: '2016', a: 100, b: 90 }
    ],
    xkey: 'y',
    ykeys: ['a', 'b'],
    zkeys: 0,
    labels: ['Block A', 'Block B']
});

并且由于这段代码，我得到了这个： Result image

Answer 1

我为此找到了一种破解方法，

只需定义要显示块的容器元素的样式，子svg元素应显示为绝对；

#bar-example{
    height:400px;
    width:800px;
    border:1px solid #000;
    position:relative;
}
#bar-example svg{
    position:absolute!important;
    top:0px;
    left:0px;
    max-width:100%;
}

然后隐藏其中一张图表的x轴标签和悬停图例。

Morris.Line({
    element: 'bar-example',
    data: month_data,
    xkey: 'period',
    ykeys: ['licensed', 'sorned'],
    zkeys: 3,
    labels: ['Licensed', 'SORN'],
    smooth: false,
    xLabelFormat: function(){
      return '';
    },
    hideHover: 'always'
});

https://codepen.io/eyeballface/pen/XWmOZpQ

将两个Morris图表合并为一个元素

1 个答案: