我正在用KendoUI替换我的网点图表。我正在显示分数分布图表。我希望所有的酒吧都是相同的颜色,除了中间分数和传奇酒吧。如何为单个颜色着色一个独特的颜色?我怎样才能让传奇变成这种新颜色?如何在KendoUI条形图中使酒吧变成另一种颜色?
下面是我旧的dotnet制图条形图,下面是我试图用它代替的新的KendoUI图表。我只需要正确地着色即可开始生意。任何帮助表示赞赏。
我正在用KendoUI替换我的网点图表。我正在显示分数分布图表。我希望所有的酒吧都是相同的颜色,除了中间分数和传奇酒吧。如何为单个颜色着色一个独特的颜色?我怎样才能让传奇变成这种新颜色?如何在KendoUI条形图中使酒吧变成另一种颜色?
下面是我旧的dotnet制图条形图,下面是我试图用它代替的新的KendoUI图表。我只需要正确地着色即可开始生意。任何帮助表示赞赏。
更新:我要离开这条线下面的答案完好的情况下,也有一些在那里谁使用的是旧版本,但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'
}
]
})
});
这是目前不可能与当前KendoUI版本。
这是他们的待办事项列表。
http://www.kendoui.com/forums/dataviz/chart/change-bar-column-color-for-each-point.aspx
可以有一种变通方法,如线程我已经在这里放说,这将是描述一系列您需要的每个颜色。它对我来说看起来效率很低,但它是目前唯一的方法。如果你只有一个图表,你可以这样做。否则,请使用此功能等待新版本的KendoUI。
如果你不得不这么做,LaGrandMere会说得很好。我会创建一个包装函数并扩展Kendo的配置选项来处理这个问题。 稍后,当Kendo引入此功能时,您可以重构包装以使用本机实现,并随着您的一天继续前进。 – 2012-04-16 18:51:43
你可以破解系统生成的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生成时间的问题。不幸的是,你可能必须在setTimeout函数中包装setAverageScoresColours()以确保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>
从2012年第2季度开始,bar系列支持将点颜色绑定到数据项字段。
这是通过colorField option完成的。 Binding to local data在线示例演示了它。
无论是剑道UI和ASP.NET MVC的传统包装暴露它作为一个选项:
.Series(series =>
{
series.Bar(model => model.Value, model => model.Color)
.Name("United States");
})
全系列重载可以看出here。
优秀。我更新了我接受的答案以指出您的评论。 – 2013-09-23 18:17:09
Telerik的最近发布了剑道UI数据显示主题辊
另一种方式在运行时可以做到这一点是使用函数返回的颜色。
下面是一个例子代码:
<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>
完善。感谢你的工作。你得到一个+1,当我22小时后,我会奖赏你的赏金。我建议为此得到一个真实的账户;) – Chev 2012-04-16 16:11:21