如何在 KendoUI 条形图中将条形设为不同颜色? [英] How do you make a bar a different color in KendoUI bar chart?

问题描述

我正在用 KendoUI 替换我的点网图表.我正在展示一个分数分布图.我希望所有的条形都是相同的颜色，除了具有中值分数的条形和图例.如何将单个条着色为独特的颜色?我将如何为传奇涂上这种新颜色?

I'm am replacing my dot net charting with KendoUI. I'm showing a Score Distribution chart. I want all of the bars to be the same color except the bar with the median score and the Legend. How do I color a single bar a unique color? How would I color the Legend this new color?

下面是我的旧 dotnet 图表条形图，下面是我试图用它替换的新 KendoUI 图表.我只需要正确地涂上颜色，我们就可以开展业务了.任何帮助表示赞赏.

Below is my old dotnet charting bar chart and below that is the new KendoUI chart I'm trying to replace it with. I just need to get that coloring right and we'll be in business. Any help is appreciated.

推荐答案

更新:我将在此行下方保留答案，以防有人使用旧版本，但 根据稍后的评论，KendoUI 现在允许您覆盖系列中各个点的样式.

Update: I'm leaving the answer below this line intact in case there are those out there who are using an older version, but per a later comment, KendoUI now allows you to override styles for individual points in a series.

我不相信你可以，在当前版本中.也就是说，您可以突破限制.

I don't believe you can, in the current version. That said, you can hack your way around the limitation.

您需要创建两个数据系列 - 一个用于突出显示的数据，另一个用于其他所有数据.将两者添加到您的图表中，并将它们设置为堆叠.

You'll need to create two data series - one for your highlighted data, and one for everything else. Add both to you chart, and set them to stacked.

这是我放在一起来说明的 jsFiddle:http://jsfiddle.net/LyndsySimon/9VZdS/.这取决于KendoUI的CDN，所以如果以后它坏了，我道歉.

Here's a jsFiddle I put together to illustrate: http://jsfiddle.net/LyndsySimon/9VZdS/. It depends on KendoUI's CDN, so if it breaks in the future I apologize.

这里是 Javascript 供参考:

Here is the Javascript for reference:

$(function() {
    var dataset = new Array(1,2,3,null,5,6);
    var highlighted = new Array(null,null,null,4,null,null);

    $('#chart').kendoChart({
        theme: 'metro',
        seriesDefaults: {
            type: 'column',
            stack: true
        },
        series: [
            {
                name: 'Not Highlighted',
                data: dataset,
                color: '#609'
            },
            {
                name: 'Highlighted',
                data: highlighted,
                color: '#f03'
            }
        ]
    })
});​

这篇关于如何在 KendoUI 条形图中将条形设为不同颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！