1

我有 2 个剑道饼图。为简单起见，让我们假设相同的图表。我只想在 Bootstrap 面板中将它们彼此对齐。我正在为饼图使用 angular-kendo 指令。这是我编写的代码，但不是并排对齐，而是将一个图表缩小到下一行中的小尺寸。

<div class="panel panel-default">
    <div class="panel-body">
        <div class="row">
            <div class="col-lg-6">
                <div kendo-chart k-options="pie" k-data-source="countries" />
            </div>
            <div class="col-lg-6">
                <div kendo-chart k-options="pie" k-data-source="countries" />
            </div>
        </div>
    </div>
</div>

我在控制器代码中定义了数据源和饼图选项：

 $scope.pie = {
        title: {
            position: "bottom",
            text: "WLAN"
        },
        legend: {
            visible: false
        },
        chartArea: {
            background: ""
        },
        seriesDefaults: {
            labels: {
                visible: true,
                background: "transparent",
                template: "#= category #: #= value#%",

            }
        },
        series: [{
            type: "pie",
            field: "value",
            categoryField: "category",
            padding: 100
        }],
        tooltip: {
            visible: true,
            format: "{0}%"
        }
    };

    $scope.countries = {
        data: [
            {
                category: "blizzard",
                value: 53.8,
                color: "#9de219"
            }, {
                category: "alpha",
                value: 16.1,
                color: "#90cc38"
            }, {
                category: "hurricane",
                value: 11.3,
                color: "#068c35"
            },
        ]
    };
4

0 回答 0