将两个莫里斯图合并为一个元素。

Question

我试图在同一个元素（框架）中组合两个莫里斯图，即柱状图和线状图，但当我试图在一个元素中应用两个莫里斯图时，我的图表不能正确显示。

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']
});

这段代码的结果是,我得到了这样的结果:结果图片

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.ioeyeballfacepenXWmOZpQ