你如何让酒吧不同的颜色在KendoUI条形图？(How do you make a bar a di

我正与KendoUI更换我点网图表。我展示一个分数分布图。我想所有的酒吧是，除了与中位数得分和传奇酒吧相同的颜色。如何颜色的单杆独特的颜色？我将如何上色联想这个新的颜色？

下面是我的老DOTNET图表条形图再下面是新KendoUI图表我试图来取代它。我只需要获得正确的色彩，我们会在企业。任何帮助表示赞赏。

Answer 1:

更新：我要离开这条线完整下面的答案的情况下，也有一些在那里谁使用的是旧版本，但每后来评论，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'
            }
        ]
    })
});

Answer 2:

与2012年第二季度发行版开始，棒系列支持结合点颜色数据项目字段。

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

无论是剑道UI和ASP.NET MVC的传统包装暴露它作为一个选项：

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

全系列重载可以看出这里。

Answer 3:

你可以砍由系统生成的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; }
}

它被用作在图表上的一个系列。视图则是这样的：

@(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>
}

BelowTelerikScriptRegistrar必须Html.Telerik（）。ScriptRegistrar后发生的部分（）被调用。

这将在Chrome，Firefox和IE10工作。我注意到有多个图表和周围的SVG的生成时机的问题。不幸的是，你可能必须包装setAverageScoresColours（）在setTimeout函数，以确保已经生成了SVG，但似乎只用一个图表来工作。

有点哈克，但不是管理大量的一系列更容易。

而对于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>

Answer 4:

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

API参考

下面是一个例子的代码：

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