在肯德尔柱状图中，你如何让一个柱形变得不同颜色?

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?

我正在用KendoUI代替我的dot net图表。我展示了一个分数分布图。我希望所有的条都是相同的颜色，除了中间值和图例。我如何给一个单杠上唯一的颜色?我该如何给图例上这个新颜色呢?

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.

下面是我的旧的dotnet图表条形图，下面是我想要替换的新的肯德尔图。我只要把颜色弄清楚就行了。任何帮助都是感激。

6 个解决方案

#1

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.

更新:如果有使用旧版本的人，我将在这行下面保留完整的答案，但是根据后面的评论，KendoUI现在允许您重写系列中的各个点的样式。

---

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.

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

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.

下面是我用来说明的一个jsFiddle: http://jsfiddle.net/LyndsySimon/9VZdS/。这取决于肯德尔的CDN，所以如果它在未来破裂，我道歉。

Here is the Javascript for reference:

这里是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'
            }
        ]
    })
});​

#2

Starting with the 2012 Q2 release, bar series support binding the point color to a data item field.

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

This is done through the colorField option. The Binding to local data online example demonstrates it.

这是通过colorField选项完成的。绑定到本地数据的在线示例演示了这一点。

Both the Kendo UI and the legacy wrappers for ASP.NET MVC expose it as an option:

Kendo UI和ASP的遗留包装器。NET MVC将其作为一个选项公开:

.Series(series =>
{
    series.Bar(model => model.Value, model => model.Color)
        .Name("United States");
})

All series overloads can be seen here.

所有系列重载都可以在这里看到。

#3

You could hack the SVG generated by the system. I have supplied the chart with a model which contains the colour for each bar. eg:

您可以修改系统生成的SVG。我已向图表提供了一个模型，其中包含了每个条形的颜色。例如:

public class Model
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Code { get; set; }
    public string Colour { get; set; }
    public decimal Score { get; set; }
}

Which is used as a series on the chart. The view then looks like:

它被用作图表上的一个系列。这样的视图看起来是:

@(Html.Telerik().Chart(Model)
    .Name("AverageScores")
    .Theme("Simple")
    .HtmlAttributes(new {style = "height: 500px"})
    .Series(series => series.Column(s => s.Score).Name("Name").Color("Blue"))
    .SeriesDefaults(sd => sd.Column().Labels(l =>
                                                 {
                                                     l.Visible(true);
                                                     l.Format("{0}%");
                                                 }))
    .Title("Mean Percentage Scores")
    .Legend(builder =>
                {
                    builder.Position(ChartLegendPosition.Bottom);
                    builder.Visible(false);
                })
    .CategoryAxis(ca => ca.Categories(x => x.Code))
    .Tooltip(builder =>
                 {
                     builder.Visible(true);
                     builder.Format("{0}%");
                     builder.Template("<#= dataItem.Name #><br/><#= value #>%");
                 })
    .ValueAxis(va => va.Numeric().Labels(a => a.Format("{0}%")).Min(0).Max(100)
    )
)

@section BelowTelerikScriptRegistrar
{
 <script type="text/javascript">


    function setAverageScoresColours() {
        var data = $('#AverageScores').data("tChart").options.series[0].dataItems;
        if (data != null) {
            for (var i = 0; i < data.length; i++) {
                var averageScore = data[i];
                $($($('div#AverageScores svg g')[i]).children('path')[0]).attr('fill', '#' + averageScore.Colour);
                $($($('div#AverageScores svg g')[i]).children('path')[0]).attr('stroke', '#' + averageScore.Colour);
            }
        }
    }

     $(document).ready(function () {
         setAverageScoresColours();
     })
 </script>
}

The section BelowTelerikScriptRegistrar must happen after the Html.Telerik().ScriptRegistrar() is called.

必须在Html.Telerik(). scriptregistrar()之后出现。

This will work in Chrome, Firefox and IE10. I have noticed there is a problem with multiple chart and the timings around the generation of the SVG. Unfortunately you might have to wrap setAverageScoresColours() in a setTimeout function to ensure the SVG has been generated, but it seems to work with just one chart.

这将适用于Chrome、Firefox和IE10。我注意到在生成SVG时，多个图表和时间有问题。不幸的是，您可能需要在setTimeout函数中包装setaveragescort escolors()，以确保SVG已经生成，但它似乎只能使用一个图表。

A bit hacky, but easier than managing lots of series.

有点陈腐，但比管理大量的系列要容易。

And for KendoUI (which I have edited for...):

对于KendoUI(我为…编辑过):

<div class="chart-wrapper">
    <div id="chart"></div>
</div>

 <script>
 function createChart() {
     $("#chart").kendoChart({
         theme: $(document).data("kendoSkin") || "default",
         title: {
             text: "Internet Users"
         },
         legend: {
             position: "bottom"
         },
         seriesDefaults: {
             type: "column"
         },
         series: [{
             name: "World",
             data: [15.7, 16.7, 20, 23.5, 26.6]
         }],
         valueAxis: {
             labels: {
                 format: "{0}%"
             }
         },
         categoryAxis: {
             categories: [2005, 2006, 2007, 2008, 2009]
         },
         tooltip: {
             visible: true,
             format: "{0}%"
         }
     });
 }

 $(document).ready(function () {
     setTimeout(function () {
         // Initialize the chart with a delay to make sure
         // the initial animation is visible
         createChart();
         $($($('div#chart svg g')[0]).children('path')[0]).attr('fill', '#123');
         $($($('div#chart svg g')[1]).children('path')[0]).attr('fill', '#321');
         $($($('div#chart svg g')[2]).children('path')[0]).attr('fill', '#213');
         $($($('div#chart svg g')[3]).children('path')[0]).attr('fill', '#312');
         $($($('div#chart svg g')[4]).children('path')[0]).attr('fill', '#132');
     }, 400);
 });
</script>

#4

Another way you can do it at runtime is using function which returns color.

另一种方法是在运行时使用返回颜色的函数。

API reference

API参考

Here is an example code:

下面是一个示例代码:

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    data: [1, 2],
    color: function(point) {
      if (point.value > 1) {
        return "red";
      }

      // use the default series theme color
    }
  }]
});
</script>

#5

This is not currently possible with current KendoUI version.

当前的KendoUI版本是不可能的。

It's on their todo-list.

在他们的todo - list。

http://www.kendoui.com/forums/dataviz/chart/change-bar-column-color-for-each-point.aspx

http://www.kendoui.com/forums/dataviz/chart/change-bar-column-color-for-each-point.aspx

There can be a kind of workaround, as said in the thread I've put here, it would be to describe a series for each color you need. It looks very inefficient to me, but it's currently the only way to do it. If you have only 1 chart, you could do it. Else, wait for a new version of KendoUI with this feature.

可以有一种变通方法，正如我在这里说过的，它将是为你需要的每种颜色描述一个系列。在我看来，这是非常低效的，但这是目前唯一的办法。如果你只有一个图表，你可以这么做。其他的，等待一个新版本的KendoUI的这个功能。

#6

Telerik have recently released a Kendo UI Data Vis Theme Roller

Telerik最近发布了Kendo UI数据对主题辊

http://demos.kendoui.com/themebuilder/dataviz.html

http://demos.kendoui.com/themebuilder/dataviz.html