如何自定义kendo UI Donut Chart？

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

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

在类别之间创建差距

通过在每个类别上将explode属性设置为true，可以创建间隙。

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属性，然后可以实现为每个类别返回适当颜色的逻辑。