控制莫里斯甜甜圈图的尺寸，即高度和宽度

Question

我正在使用莫里斯图绘制甜甜圈图。 但我想控制它的高度。 甜甜圈图始终具有固定大小。 当我降低div的高度时，它不尊重div的尺寸。甜甜圈图溢出。

    <html>
      <head>
         #donutChart{
             height:200px;
         }
      </head>
      <body>
        <div id="donutChart"></div>
      </body>
    <script>
    var donutData = [{label:"A", count:100},
                 {label:"B", count:200},
                 {label:"C", count:300}
                ]
    var color: [ "red", "green", "blue"]
    drawDonutChart( divId, donutData, colors ){
        var total = 0;
        for(var i = 0; i < donutData.length ; i++){
            var item = donutData[i];
            total += item.value
        } 
        Morris.Donut({
            element: divId,
            data: donutData,
            colors: colors,
            formatter: function(x) {
                return Math.round( (x*100)/total ) +"% ("+ x +")" ;
            }
        });
    }
   </script>
   <html>

Answer 1

您可以在morris.js中设置它Donut.prototype.redraw = function()请检查以下Donut.prototype.redraw = function()行：

  cx = this.el.width() / 2;
  cy = this.el.height() / 2;

也不要忘记设置父dom元素的尺寸。 希望这可以帮助！

控制莫里斯甜甜圈图的尺寸，即高度和宽度

问题描述

1 个解决方案

解决方案1
0 2019-01-27 08:44:17

控制莫里斯甜甜圈图的尺寸，即高度和宽度

问题描述

1 个解决方案

解决方案1 0 2019-01-27 08:44:17

解决方案1
0 2019-01-27 08:44:17