Question

我正在使用Morris图表绘制圆环图。但我想控制它的高度。圆环图总是有固定的大小。它不尊重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()中进行设置，请检查以下几行：

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

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

控制莫里斯甜甜圈图表尺寸即高度＆amp;宽度

1 个答案: