Javascript 如何在KendoUI条形图中使条形图具有不同的颜色？

我正在用KendoUI替换我的网络图表。我正在展示一张分数分布图。我希望所有的酒吧都是相同的颜色，除了中位数和图例酒吧。如何将单个条形图涂成独特的颜色？我该如何将图例涂成这种新颜色

下面是我以前的dotnet图表条形图，下面是我正在尝试用新的KendoUI图表替换它。我只需要把颜色弄好，我们就可以做生意了。感谢您的帮助

---

更新：我保留这行下面的答案，以防有人使用旧版本，但是，KendoUI现在允许您覆盖系列中各个点的样式

---

我不相信你能，在目前的版本中。也就是说，你可以绕过限制

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

下面是我放在一起演示的JSFIDLE:。这取决于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'
            }
        ]
    })
});​

---

这在当前的KendoUI版本中是不可能的

这在他们的待办事项清单上

---

可以有一种解决方法，正如我在这里的帖子中所说的，它将为您需要的每种颜色描述一个系列。对我来说，这看起来效率很低，但这是目前唯一的方法。如果你只有一张图表，你可以做。否则，等待具有此功能的新版本KendoUI。

您可以破解系统生成的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>
}

@（Html.Telerik（）.Chart（模型）
.Name（“平均分数”）
.主题（“简单”）
.HtmlAttributes（新的{style=“height:500px”}）
.Series（Series=>Series.Column（s=>s.Score）.Name（“Name”）.Color（“Blue”））
.seriesDefault（sd=>sd.Column（）.Labels（l=>
{
l、 可见（真实）；
l、 格式（“{0}%”）；
}))
.标题（“平均百分比分数”）
.Legend（生成器=>
{
生成器位置（ChartLegendPosition.Bottom）；
生成器。可见（假）；
})
.CategoryAxis（ca=>ca.Categories（x=>x.Code））
.工具提示（生成器=>
{
builder.Visible（true）；
格式（“{0}%”）；
builder.Template（“
%”）；
})
.ValueAxis（va=>va.Numeric（）.Labels（a=>a.Format（“{0}%”））.Min（0）.Max（100）
)
)
@下面的章节是ElerIkscript
{
函数setAverageScoresColours（）{
var数据=$（“#AverageScores”）.data（“tChart”）.options.series[0]。数据项；
如果（数据！=null）{
对于（变量i=0；i

下面的部分必须在调用Html.Telerik（）.scriptRegistrator（）之后出现

这将适用于Chrome、Firefox和IE10。我注意到在生成SVG的过程中，多重图表和时间安排存在问题。不幸的是，您可能必须在setTimeout函数中包装setAverageScoresColours（），以确保生成了SVG，但它似乎只适用于一个图表

有点老套，但比管理很多系列更容易

对于KendoUI（我为…）编辑过：

函数createChart（）{
$（“#图表”）。肯多卡特({
主题：$（文档）.data（“肯多斯金”）| |“默认值”，
标题：{
正文：“互联网用户”
},
图例：{
位置：“底部”
},
系列默认值：{
类型：“列”
},
系列：[{
名称：“世界”，
数据：[15.7,16.7,20,23.5,26.6]
}],
valueAxis：{
标签：{
格式：{0}%
}
},
类别：{
类别：[2005、2006、2007、2008、2009]
},
工具提示：{
可见：对，
格式：{0}%
}
});
}
$（文档）.ready（函数（）{
setTimeout（函数（）{
//延迟初始化图表以确保
//初始动画可见
createChart（）；
$（$（$（'div#chart svg'）[0]）.children（'path'）[0]）.attr（'fill'，'#123'）；
$（$（$（'div#chart svg g'）[1]）.children（'path'）[0]）.attr（'fill'，'#321'）；
$（$（$（'div#chart svg g'）[2]）。子项（'path'）[0]）。属性（'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);
});

从2012年第2季度开始，bar系列支持将点颜色绑定到数据项字段

这是通过。在线示例演示了这一点

Kendo UI和ASP.NET MVC的旧包装器都将其作为一个选项公开：

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

---

所有系列的重载都可以看到。

Telerik最近发布了一个剑道UI Data Vis Theme Roller

---

运行时执行此操作的另一种方法是使用返回颜色的函数

下面是一个示例代码：

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

$（“#图表”）。肯多卡特({
<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>