如何在KendoUI條形圖中使條形圖成為不同的顏色？

Question

我正在用KendoUI取代我的dot net charting。 我正在顯示分數分布圖表。 我希望所有的條形圖都是相同的顏色，除了具有中位數分數和圖例的條形圖。 如何為單個條紋着色獨特的顏色？ 我如何為傳奇這種新顏色着色？

下面是我的舊dotnet圖表條形圖，下面是我正在嘗試用它取代它的新KendoUI圖表。 我只需要正確地着色，我們就會開展業務。 任何幫助表示贊賞。

Answer 1

更新：如果有那些使用較舊版本的人，我將保留此行下面的答案，但是根據后來的評論 ，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'
            }
        ]
    })
});​

Answer 2

從2012 Q2版本開始，bar系列支持將點顏色綁定到數據項字段。

這是通過colorField選項完成的。 綁定到本地數據在線示例演示了它。

Kendo UI和ASP.NET MVC的遺留包裝都將它作為一個選項公開：

.Series(series =>
{
    series.Bar(model => model.Value, model => model.Color)
        .Name("United States");
})

所有系列過載都可以在這里看到。

Answer 3

你可以破解系統生成的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>
}

必須在調用Html.Telerik（）。ScriptRegistrar（）之后發生BelowTelerikScriptRegistrar部分。

這適用於Chrome，Firefox和IE10。 我注意到多個圖表和SVG生成的時間存在問題。 不幸的是，您可能必須在setTimeout函數中包裝setAverageScoresColours（）以確保已生成SVG，但它似乎僅適用於一個圖表。

有點hacky，但比管理很多系列更容易。

對於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>

Answer 4

在運行時可以使用的另一種方法是使用返回顏色的函數。

API參考

這是一個示例代碼：

<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>

Answer 5

目前的KendoUI版本目前無法實現。

這是他們的待辦事項清單。

http://www.kendoui.c​​om/forums/dataviz/chart/change-bar-column-color-for-each-point.aspx

可以有一種解決方法，正如我在這里提到的主題所說，它將描述你需要的每種顏色的系列。 它對我來說效率很低，但它是目前唯一的方法。 如果您只有1個圖表，則可以執行此操作。 否則，請使用此功能等待新版本的KendoUI。

Answer 6

Telerik最近發布了一個Kendo UI Data Vis主題滾輪

http://demos.kendoui.c​​om/themebuilder/dataviz.html