我正在用 KendoUI 替换我的点网图表。我正在显示一个分数分布图。我希望所有条形图的颜色都相同，除了具有中值分数和图例的条形图。如何为单个条着色独特的颜色？如何为 Legend 上色？
下面是我的旧 dotnet 图表条形图，下面是我试图替换它的新 KendoUI 图表。我只需要把颜色弄对，我们就可以做生意了。任何帮助表示赞赏。
【问题讨论】：
标签： javascript jquery asp.net telerik kendo-ui
更新：我将保留此行下方的答案，以防有人使用旧版本，但per a later comment，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'
}
]
})
});
【讨论】：
从 2012 Q2 版本开始，条形系列支持将点颜色绑定到数据项字段。
这是通过colorField option 完成的。 Binding to local data 在线示例演示了它。
Kendo UI 和 ASP.NET MVC 的旧包装器都将其作为一个选项公开：
.Series(series =>
{
series.Bar(model => model.Value, model => model.Color)
.Name("United States");
})
所有系列重载都可以看到here。
【讨论】：
您可以破解系统生成的 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>
【讨论】：
您可以在运行时执行此操作的另一种方法是使用返回颜色的函数。
这是一个示例代码：
<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>
【讨论】：
当前的 KendoUI 版本目前无法做到这一点。
它在他们的待办事项列表上。
http://www.kendoui.com/forums/dataviz/chart/change-bar-column-color-for-each-point.aspx
可以有一种解决方法，正如我在此处放置的线程中所说，它是为您需要的每种颜色描述一个系列。对我来说它看起来效率很低，但这是目前唯一的方法。如果你只有一张图表，你可以做到。否则，请等待具有此功能的新版本 KendoUI。
【讨论】：
Telerik 最近发布了一个 Kendo UI Data Vis Theme Roller
【讨论】：