Question

我需要具有以下2个要求的嵌套甜甜圈图：

外部甜甜圈的标签显示在外部，内部甜甜圈的标签不可见。我可以在外面看到外面的甜甜圈。但是，对于内部的标签，标签出现在甜甜圈本身上。

我的期望是：

我可以实现：

甜甜圈图的单击部分应展开。我能够针对外部甜甜圈实现此目标，但无法针对内部甜甜圈实现此目标。我也希望内部的“甜甜圈”单击相同：

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/donut-charts/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.flat.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example">
    <div class="demo-section k-content wide">
        <div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
    </div>
    <script>
        function createChart() {
        var dataForNestedDonut = [
            {
                "series": 'status',
                "source": "New",
                "percentage": 22,
                "color": "#9de219",
                "explode": false,
                "labelVisibility": true
            }, {
                "series": 'status',
                "source": "Pending",
                "percentage": 29,
                "color": "#90cc38",
                "explode": false,
                "labelVisibility": true
            }, {
                "series": 'status',
                "source": "In-Progress",
                "percentage": 49,
                "color": "#068c35",
                "explode": false,
                "labelVisibility": true
            },{   
                "series": 'SLA',
                "source": "SLA Due",
                "percentage": 20,
                "color": "#FF0000",
                "explode": false,
                "labelVisibility": false
            }, {
                "series": 'SLA',
                "source": "No SLA",
                "percentage": 32,
                "color": "#f5deb3",
                "explode": false,
                "labelVisibility": false
            }, {
                "series": 'SLA',
                "source": "SLA Warning",
                "percentage": 48,
                "color": "#FFFF00",
                "explode": false,
                "labelVisibility": false
            }];

        $("#chart").kendoChart({
            legend: {
                visible: false,
            },
            seriesDefaults: {
                type: "donut",
                overlay: { gradient: "none" },
                labels: {
                    visible: true,
                    background: "transparent"
                },
                visual: function (e) {
                    e.options.highlight.border.width = 20;
                    e.options.highlight.border.color = "black";
                    return e.createVisual();
                }
            },
            dataSource: {
                data: dataForNestedDonut,
                group: {
                    field: "series"
                }
            },
            series: [{
                field: "percentage",
                categoryField: "source",
                colorField: "color",
                explodeField: "explode",
                // Need wo implement something like this
                //labelVisibleField: "labelVisibility",
                labels: {
                    position: "outsideEnd",
                    template: "#= category # \n #= value #",
                    visible: true,
                    background: "transparent",
                },
                // padding: 10
            },
            ],

            tooltip: {
                visible: true,
                template: "${ category } - ${ value }%"
            },
            seriesClick: function (e) {
                $.each(e.sender.dataSource.view(), function () {
                    $.each(this.items, function () {
                        this.explode = false;
                    })                    
                });
                e.sender.options.transitions = false;
                // Not working for the inner Donut
                e.dataItem.explode = true;
                e.sender.refresh();
                //alert(`identifier: ${e.dataItem.identifier} \n ${e.series.name} \n ${e.dataItem.source} \n ${e.dataItem.percentage}`);
            },
        });
        }
        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
    </div>
</body>
</html>

关于如何实现这些的任何建议

使用jQuery分解和标记嵌套剑道甜甜圈图

0 个答案: