如何自定义剑道 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

我终于知道如何自定义这些方面了。

在类别之间建立差距

通过将每个类别的 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 属性可以使用一个将相关类别对象作为参数的函数进行设置，然后可以实现为每个类别返回适当颜色的逻辑。