如何自定义 kendo UI 圆环图？

Question

我正在尝试自定义 圆环图 的某些方面，我正在填充以下 ASP.NET 剃刀代码 :

@(Html.Kendo().Chart()
        .Name("chart")
        .ChartArea(chartArea => chartArea
            .Background("transparent"))
        .SeriesDefaults(series =>
            series.Donut().StartAngle(0)
        )
        .Series(series =>
        {
        series.Donut(new dynamic[] {
                new {category = "Asia", value = 25.0, color = "#124324" },
                new {category = "Europe",value = 25.0, color = "#90cc38"},
                new {category = "Latin America",value = 25.0, color = "#068c35"},
                new {category = "Africa",value = 25.0, color = "#006634"}
            }) ...

我搜索了文档，但找不到如何自定义以下内容：

• 在每个类别之间创建一个间隔
• 为每个类别设置边框颜色

如何自定义这些方面？

Answer 1

我终于找到了如何自定义这些方面。

在类别之间创建差距

通过将每个类别的爆炸 属性 设置为真，可以创建一个间隙。

series.Donut(new dynamic[] {
                new {category = "Asia", value = 25.0, color = "#124324" , explode = true},
                new {category = "Europe",value = 25.0, color = "#90cc38", explode = true},
                new {category = "Latin America",value = 25.0, color = "#068c35", explode = true},
                new {category = "Africa",value = 25.0, color = "#006634", explode = true}
            }) ...

请注意，这不是一个理想的解决方案，因为它不允许控制间隙的大小。

每个类别的特定边框颜色

图表代码的javascript版本可以使用如下：

$("#chart").kendoChart({
                title: {
                    position: "bottom",
                    text: "Chart Title",
                },
                ...
                seriesDefaults: {
                    margin: 0,
                    type: "donut",
                    border: {
                        width: 1,
                        color: function (point) {
                            //Example
                            var color_data = {"cat1" : "blue", "cat2": "red"};
                            return color_data[point.category];
                        }
                    }
                }
                ...

seriesDefault.border.color 属性 可以用一个以相关类别对象作为参数的函数来设置，然后可以实现 returns 为每个类别对象设置适当颜色的逻辑类别。