如何在不重叠的情况下并排显示几个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图表正确合适。