ドットネットチャートをKendoUIに置き換えます。スコア分布チャートを表示しています。スコアの中央値と凡例のあるバーを除いて、すべてのバーを同じ色にします。1本のバーに独自の色を付けるにはどうすればよいですか？レジェンドをこの新しい色にどのように着色しますか？
以下は私の古いドットネットチャートの棒グラフであり、その下は私が置き換えようとしている新しいKendoUIチャートです。私はその色を正しくする必要があります、そして私たちはビジネスになります。どんな助けでも大歓迎です。
質問する
17820 次
6 に答える
19
更新：古いバージョンを使用している人がいる場合に備えて、この行の下の回答はそのままにしておきますが、後のコメントによると、KendoUIではシリーズの個々のポイントのスタイルをオーバーライドできるようになりました。
現在のバージョンでは、できるとは思いません。そうは言っても、制限を回避する方法をハックすることができます。
2つのデータ系列を作成する必要があります。1つは強調表示されたデータ用で、もう1つはその他すべて用です。両方をチャートに追加し、スタックに設定します。
これが私が説明するためにまとめた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-04-16T16:01:59.920 に答える
15
2012 Q2リリース以降、バーシリーズはポイントカラーをデータアイテムフィールドにバインドすることをサポートしています。
これは、colorFieldオプションを介して行われます。ローカルデータへのバインドのオンライン例は、それを示しています。
KendoUIとASP.NETMVCのレガシーラッパーの両方が、オプションとして公開しています。
.Series(series =>
{
series.Bar(model => model.Value, model => model.Color)
.Name("United States");
})
すべてのシリーズの過負荷はここで見ることができます。
于 2012-09-18T07:13:44.087 に答える
1
システムによって生成された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の生成のタイミングに問題があることに気づきました。残念ながら、SVGが生成されたことを確認するためにsetAverageScoresColours（）をsetTimeout関数でラップする必要があるかもしれませんが、それは1つのチャートでのみ機能するようです。
少しハッキーですが、多くのシリーズを管理するよりも簡単です。
そして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-04-18T10:00:58.193 に答える
1
実行時にそれを行うことができる別の方法は、色を返す関数を使用することです。
コード例は次のとおりです。
<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>
于 2015-09-11T10:34:03.963 に答える
0
これは現在、現在のKendoUIバージョンでは不可能です。
それは彼らのやることリストに載っています。
http://www.kendoui.com/forums/dataviz/chart/change-bar-column-color-for-each-point.aspx
私がここに置いたスレッドで述べたように、ある種の回避策があるかもしれません、それはあなたが必要とする各色のシリーズを説明することでしょう。それは私には非常に非効率に見えますが、現在それを行う唯一の方法です。チャートが1つしかない場合は、それを行うことができます。それ以外の場合は、この機能を備えたKendoUIの新しいバージョンを待ちます。
于 2012-04-16T16:03:02.167 に答える
0
Telerikは最近、KendoUIデータVisテーマローラーをリリースしました
于 2012-11-26T16:22:38.210 に答える