控制KENDO UI甜甜圈圖的大小

我在控制Kendo-UI中甜甜圈組件的大小時遇到了困難（Here）。這裏是我的代碼：控制KENDO UI甜甜圈圖的大小

<div class="analytic-block"> 
    <h4>Sources</h4> 
     <span class="text-muted">Recent activity</span> 

    @(Html.Kendo() 
      .Chart<ActivityModel>() 
      .Name("donutChart") 
      .Legend(legend => legend.Position(ChartLegendPosition.Bottom)) 
      .DataSource(ds => ds 
           .Read(read => read.Action("Sources", "Statistics")) 
           .Group(group => group.Add(item => item.SliceLayer)) 
           .Sort(sort => sort.Add(item => Guid.NewGuid().ToString()))) 
      .Series(series => 
      { 
       series.Donut(model => model.Share, model => model.Label, model => model.Color, model => true, mode => true) 
        .Border(b => 
        { 
         b.Color("white"); 
         b.Width(2); 
        }) 
        .StartAngle(0) 
        .Labels(labels => labels.Visible(true) 
              .Position(ChartPieLabelsPosition.OutsideEnd) 
              .Template(" #=dataItem.Label #")//.Template("<span style=\"color:#=dataItem.Color#;\"> #=dataItem.Label # </span>") 
              .Background("transparent") 
              .Border(1, "grey", ChartDashType.Solid) 
              .Padding(2)) 
       .Padding(120); 
      }) 
      .Tooltip(tooltip => tooltip 
            .Template(" #=dataItem.Label # ") 
            .Visible(true))) 
</div>

，這裏是它產生的結果是：

image with unwanted white gaps

我能夠通過改變.Padding（120）來調整圖表的大小，但這種葉子圖表上方和下方兩個大空間。我找不到任何有關如何操作繪製該圖表的區域大小的參考。

如果有人可以提出解決方案，那將不勝感激。

來源

2014-03-24 AstroSharp

您應該簡單地將width/height設置爲您轉換爲圖表的div圖表元素。

Here就是一個例子。

來源

2014-03-24 21:13:12

謝謝問題是我沒有將包含的div ID與圖表的ID關聯起來。你的迴應推動我走向正確的答案。 – AstroSharp

我發現我的錯誤。 div容器必須與圖表ID相關：

<div id="donutChart" class="analytic-block"> 

@(Html.Kendo() 
     .Chart<ActivityModel>() 
     .Name("donutChart") 
</div>

來源

2014-03-25 22:16:09 AstroSharp

控制KENDO UI甜甜圈圖的大小

回答

相關問題