如何在不重疊的情況下並排顯示幾個kendo圖表

Question

我有幾個像這樣的kendo圖表。

我想不重疊的系列，以顯示這些圖表。

保證金，填充不起作用。

HTML

<table style="width:100%;table-layout:auto;"> 
     <tr>     
      <td id="divPrintBillFinalReportPieChart_801" style="width:20%;float:right;display:inline-block;"></td> 
      <td id="divPrintBillFinalReportPieChart_802" style="width:20%;float:right;display:inline-block;"></td> 
      <td id="divPrintBillFinalReportPieChart_811"style="width:20%;float:right;display:inline-block;"></td> 
     </tr> 
    </table> 

的JavaScript

$('#divPrintBillFinalReportPieChart_801').kendoChart({ 
     dataSource: { data: BILAT_No_801 }, 
     series: [ 
      { type: "pie", field: "Percentage", categoryField: "DVST_Name" } 
     ], 
     seriesDefaults: { 
      labels: { visible: true, background: "transparent", template: "#= category #: \n #= value#%" } 
     }, 
     title: { text: "부분별 임금비" }, 
     legend: { visible: false }, 
     seriesColors: ["#9de219", "#90cc38", "#068c35", "#006634", "004d38", "#033939", "#fad84a", "#ff9800", "#03a9f4", "#4caf50"], 
     tooltip: { visible: true, template: "${ category } - ${ value }%" }, 
     chartArea: { width: 200, height: 300 } 
    }); 

Answer 1

你可以試着在每一個使用float:left，然後用空白和邊距。 （這是在html和css的東西）你也可以設置表格單元格的寬度和高度爲可能的自動，或者隨着它們的大小一起玩，直到kendo圖表正確合適。