如何为 Telerik Kendo UI 饼图楔形着色?

发布于 2024-12-22 19:36:30 字数 1376 浏览 2 评论 0原文

我正在使用 Telerik Kendo 饼图,并且我希望能够为楔形部分着色。

以下是我的 Kendo UI 饼图的标记:

<script type="text/javascript">
function createChart() {
    jQuery("#chart").kendoChart({
        theme: jQuery(document).data("kendoSkin") || "Metro",
        legend: {
            position: "bottom"
        },
        seriesDefaults: {
            labels: {
                visible: true,
                format: "{0}%"
            }
        },

        series: [{
            type: "pie",
            data: [{
                category: "Remaining Work",
                value: 75,
                explode: true
            }, {
                category: "CIOs",
                value: 2
            }, {
                category: "Other Executives",
                value: 10
            }, {
                category: "Directors and Physicians",
                value: 13
            }]
        }],
        tooltip: {
            visible: true,
            format: "{0}%"
        }
    });
}

jQuery(document).ready(function () {
    setTimeout(function () {
        createChart();

        // Initialize the chart with a delay to make sure
        // the initial animation is visible
    }, 400);

    jQuery(document).bind("kendo:skinChange", function (e) {
        createChart();
    });
});
 </script>

我希望剩余的工作为浅灰色。我该如何实现这个目标?

任何建议将不胜感激。

I'm using the Telerik Kendo Pie Chart and I want to be able to color the wedges.

The following is the mark up for my Kendo UI pie chart:

<script type="text/javascript">
function createChart() {
    jQuery("#chart").kendoChart({
        theme: jQuery(document).data("kendoSkin") || "Metro",
        legend: {
            position: "bottom"
        },
        seriesDefaults: {
            labels: {
                visible: true,
                format: "{0}%"
            }
        },

        series: [{
            type: "pie",
            data: [{
                category: "Remaining Work",
                value: 75,
                explode: true
            }, {
                category: "CIOs",
                value: 2
            }, {
                category: "Other Executives",
                value: 10
            }, {
                category: "Directors and Physicians",
                value: 13
            }]
        }],
        tooltip: {
            visible: true,
            format: "{0}%"
        }
    });
}

jQuery(document).ready(function () {
    setTimeout(function () {
        createChart();

        // Initialize the chart with a delay to make sure
        // the initial animation is visible
    }, 400);

    jQuery(document).bind("kendo:skinChange", function (e) {
        createChart();
    });
});
 </script>

I'd like the remaining work to be light gray. How do I accomplish this?

Any suggestions would be appreciated.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

纵山崖 2024-12-29 19:36:30

Kendo UI DataViz 中,所有图表都支持通过 seriesColors 选项。该属性将采用十六进制颜色字符串数组。例如:

$("#chart").kendoChart({
   ...
   seriesColors: ["#7c7c7c", ... ]
});

In Kendo UI DataViz, all charts support overriding the theme colours via the seriesColors option. This property will take an array of hexadecimal colour strings. For example:

$("#chart").kendoChart({
   ...
   seriesColors: ["#7c7c7c", ... ]
});
×纯※雪 2024-12-29 19:36:30
it is an implementation from server side would be very interesting on the concept of avoiding Similar shades..please look in to the below code which iam inserting to bind the pie chart with colors
 If Not radChart Is Nothing Then
                    radChart.PlotArea.EmptySeriesMessage.TextBlock.Text = strNoData
                    radChart.SkinsOverrideStyles = False
                    Dim seriesColors As Color() = {Color.Aqua, Color.Bisque, Color.Chartreuse, Color.Coral, Color.DarkCyan, Color.DarkKhaki, Color.DimGray, Color.Yellow, Color.LightGreen, Color.Magenta, Color.Orange, Color.Purple, Color.SaddleBrown, Color.Silver, Color.WhiteSmoke, Color.Violet, Color.RosyBrown, Color.Olive, Color.Navy, Color.IndianRed}
                    Dim seriesPalette As New Palette("seriesPalette", seriesColors, True)
                    radChart.CustomPalettes.Add(seriesPalette)
                    radChart.SeriesPalette = "seriesPalette"
                    radChart.DataBind()
                End If
it is an implementation from server side would be very interesting on the concept of avoiding Similar shades..please look in to the below code which iam inserting to bind the pie chart with colors
 If Not radChart Is Nothing Then
                    radChart.PlotArea.EmptySeriesMessage.TextBlock.Text = strNoData
                    radChart.SkinsOverrideStyles = False
                    Dim seriesColors As Color() = {Color.Aqua, Color.Bisque, Color.Chartreuse, Color.Coral, Color.DarkCyan, Color.DarkKhaki, Color.DimGray, Color.Yellow, Color.LightGreen, Color.Magenta, Color.Orange, Color.Purple, Color.SaddleBrown, Color.Silver, Color.WhiteSmoke, Color.Violet, Color.RosyBrown, Color.Olive, Color.Navy, Color.IndianRed}
                    Dim seriesPalette As New Palette("seriesPalette", seriesColors, True)
                    radChart.CustomPalettes.Add(seriesPalette)
                    radChart.SeriesPalette = "seriesPalette"
                    radChart.DataBind()
                End If
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文