javascript 如何在 KendoUI 条形图中将条形设为不同颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10143726/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you make a bar a different color in KendoUI bar chart?
提问by Rodney
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 替换我的点网图表。我正在展示一个分数分布图。我希望所有的条形都是相同的颜色，除了具有中值分数的条形和图例。如何将单个条着色为独特的颜色？我将如何为传奇着色这种新颜色？
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 图表条形图，下面是我试图用它替换的新 KendoUI 图表。我只需要正确地涂上颜色，我们就可以开展业务了。任何帮助表示赞赏。
回答by Lyndsy Simon
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/。这取决于 KendoUI 的 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'
}
]
})
});?
回答by Tsvetomir Tsonev
Starting with the 2012 Q2 release, bar series support binding the point color to a data item field.
从 2012 Q2 版本开始，条形系列支持将点颜色绑定到数据项字段。
This is done through the colorField option. The Binding to local dataonline 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.
所有系列过载都可以在这里看到。
回答by didiHamman
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.
下面的TelerikScriptRegistrar 部分必须在调用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 的时间存在问题。不幸的是，您可能必须将 setAverageScoresColours() 包装在 setTimeout 函数中以确保生成了 SVG，但它似乎只适用于一个图表。
A bit hacky, but easier than managing lots of series.
有点 hacky，但比管理大量系列更容易。
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>
回答by Alexander Skogorev
Another way you can do it at runtime is using function which returns color.
在运行时执行此操作的另一种方法是使用返回颜色的函数。
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>
回答by SimonGates
Telerik have recently released a Kendo UI Data Vis Theme Roller
Telerik 最近发布了 Kendo UI Data Vis Theme Roller
回答by LaGrandMere
This is not currently possible with current KendoUI version.
当前的 KendoUI 版本目前无法做到这一点。
It's on their 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。
