莫里斯图表在手机上的定位答案

【问题标题】：Morris charts positioning on a cell phone莫里斯图表在手机上的定位
【发布时间】：2015-04-21 11:47:46
【问题描述】：

我试图弄清楚如何让我的莫里斯图表在手机上响应。我希望它们在小屏幕上时彼此位于下方。有什么想法吗？

<div class="container" style= "float: left; width: 50%;">
        <div class="row">
            <div class="col-sm-6">
                <h2>Your activities:</h2>  
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div id="user_activity-donut"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="container" style= "float: right; width: 50%">
        <div class="row">
            <div class="col-sm-6">
                <h2>What others do:</h2>  
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div id="global_activity-donut"></div>
                </div>
            </div>
        </div>
    </div>

以下是 .js 部分。

$.getScript('http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js',function(){
$.getScript('http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.0/morris.min.js',function(){
      Morris.Donut({
        element: 'user_activity-donut',
        data: [
         {label: "Jogging", value: 50},
         {label: "Sailing", value: 20},
         {label: "Walking", value: 15}
        ]
      });
      Morris.Donut({
        element: 'global_activity-donut',
        data: [
         {label: "Jogging", value: 30},
         {label: "Sailing", value: 5},
         {label: "Walking", value: 65}
        ]
      });
});
});

【问题讨论】：

如果我在你那里我应该使用 css media query。当在小屏幕上（您的手机）display 时，图表为 block，而在大屏幕上时 display，例如 inline-block。看这里：w3schools.com/CSS/css_mediatypes.asp.
莫里斯图表与莫里斯舞蹈有关系吗？

标签： html morris.js

【解决方案1】：

将此CSS添加到您的头部标签

&lt;link rel="stylesheet" href="https://www.cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" /&gt;

然后在标签和值之后添加以下内容调整大小：真，重绘：真，

例子：

Morris.Donut({
        element: 'user_activity-donut',
        data: [
         {label: "Jogging", value: 50},
         {label: "Sailing", value: 20},
         {label: "Walking", value: 15}
        ]
resize:true,
redraw:true,
      });

【讨论】：