我有几个这样的剑道图表。

javascript - 如何并排显示几个剑道图而不重叠-LMLPHP

我想显示这些图表而不重叠系列。

边距,填充不起作用。

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 }
    });

最佳答案

您可以尝试在每一个上使用float:left,然后使用填充和边距。 (这是在html和css方面)。您还可以将表格单元格的宽度和高度设置为可能的自动值,或者调整其大小,直到剑道图正确适合为止。

10-07 18:10