如何在KendoUI条形图中使条形图成为不同的颜色?

Rod*_*ney 11 javascript asp.net jquery telerik kendo-ui

我正在用KendoUI取代我的dot net charting.我正在显示分数分布图表.我希望所有的条形图都是相同的颜色,除了具有中位数分数和图例的条形图.如何为单个条纹着色独特的颜色?我如何为传奇这种新颜色着色?

下面是我的旧dotnet图表条形图,下面是我正在尝试用它取代它的新KendoUI图表.我只需要正确地着色,我们就会开展业务.任何帮助表示赞赏.

在此输入图像描述

Lyn*_*mon 18

更新:如果有那些使用较旧版本的人,我将保留此行下方的答案,但是根据后来的评论,KendoUI现在允许您覆盖系列中各个点的样式.


在当前版本中,我不相信你可以.也就是说,你可以破解你的限制.

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

这是一个jsFiddle我放在一起来说明:http://jsfiddle.net/LyndsySimon/9VZdS/.它取决于KendoUI的CDN,所以如果将来打破我道歉.

这是Javascript供参考:

$(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'
            }
        ]
    })
});?
Run Code Online (Sandbox Code Playgroud)


Tsv*_*nev 15

从2012 Q2版本开始,bar系列支持将点颜色绑定到数据项字段.

这是通过colorField选项完成的.在绑定到本地数据的在线例子演示了它.

Kendo UI和ASP.NET MVC的遗留包装都将它作为一个选项公开:

.Series(series =>
{
    series.Bar(model => model.Value, model => model.Color)
        .Name("United States");
})
Run Code Online (Sandbox Code Playgroud)

所有系列过载都可以在这里看到.