Bạn có thể hack SVG do hệ thống tạo. Tôi đã cung cấp biểu đồ với một mô hình có chứa màu cho mỗi thanh. ví dụ:
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; }
}
Được sử dụng làm hàng loạt trên biểu đồ. Chế độ xem sau đó trông giống như:
@(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>
}
Phần dướiTelerikScriptRegistrar phải xảy ra sau khi Html.Telerik(). ScriptRegistrar() được gọi.
Điều này sẽ hoạt động trong Chrome, Firefox và IE10. Tôi đã nhận thấy có một vấn đề với nhiều biểu đồ và thời gian xung quanh việc tạo ra SVG. Thật không may, bạn có thể phải đặt setAverageScoresColours() trong một hàm setTimeout để đảm bảo SVG đã được tạo, nhưng có vẻ như nó chỉ hoạt động với một biểu đồ.
Một chút hacky, nhưng dễ hơn là quản lý nhiều chuỗi.
Và đối với KendoUI (tôi đã chỉnh sửa cho ...):
<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>
Perfect. Cảm ơn bạn đã làm việc xung quanh. Bạn nhận được +1 và khi 22 giờ của tôi đã hết, tôi sẽ trao cho bạn tiền thưởng. Tôi sẽ đề nghị bạn có được một tài khoản thực sự cho điều đó;) – Chev