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

问题描述

我正在用KendoUI取代我的dot net charting。我正在显示分数分布图表。我希望所有的条形图都是相同的颜色，除了具有中位数分数和图例的条形图。如何为单个条纹着色独特的颜色？我将如何为这款新颜色添加颜色？

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屋！