複数の剣道図を重ねずに並べて表示する方法

Question

このような剣道図がいくつかあります。

私は、シリーズを重ねることなく、これらのチャートを表示したいです。

余白がありません。

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

あなたは、パディングとマージンを使用し、その後、各1にfloat:leftを使用して試みることができます。 （これはHTMLとCSSの側面です）テーブルセルの幅と高さをautoに設定したり、剣道図が正しく収まるまでサイズを変更したりすることもできます。