Как сделать бар другого цвета в гистограмме KendoUI?

Question

Я использую KendoUI для замены графических ячеек. Я показываю график распределения баллов. Я хочу, чтобы все бары были одного цвета, кроме бара со срединным счетом и легендой. Как я могу покрасить один бар в уникальный цвет? Как я буду окрасить легенду в этот новый цвет?

Ниже представлена ​​моя старая графическая диаграмма dotnet и ниже, это новый график KendoUI, который я пытаюсь заменить. Мне просто нужно получить эту окраску, и мы будем в бизнесе. Любая помощь приветствуется.

Answer 1

Обновление: Я уезжаю ответ ниже этой линии неповрежденным в случае, если есть те, которые там используют старую версию, но per a later comment, KendoUI теперь позволяет переопределить стили для отдельных точек в серии.

---

Я не верю, что вы можете в текущей версии. Тем не менее, вы можете нарушить ограничение.

Вам необходимо создать две серии данных - одну для выделенных вами данных и одну для всего остального. Добавьте оба диаграммы и установите их в стек.

Вот jsFiddle, который я собрал для иллюстрации: http://jsfiddle.net/LyndsySimon/9VZdS/. Это зависит от CDN от KendoUI, поэтому, если он в будущем сломается, я приношу свои извинения.

Вот 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

Это не возможно в настоящее время с текущей версией KendoUI.

Это в своем списке дел.

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

Там может быть своего рода обходной путь, как сказал в потоке я поставил здесь, было бы описать серию для каждого цвета вам. Это выглядит очень неэффективно для меня, но в настоящее время это единственный способ сделать это. Если у вас всего 1 график, вы можете это сделать. Еще, дождитесь новой версии KendoUI с этой функцией.

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

раздел BelowTelerikScriptRegistrar должно произойти после Html.Telerik() ScriptRegistrar() называется.

Это будет работать в Chrome, Firefox и IE10. Я заметил, что есть проблема с несколькими диаграммами и таймингами вокруг генерации SVG. К сожалению, вам может потребоваться обернуть setAverageScoresColours() в функции setTimeout, чтобы гарантировать, что 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> 

Answer 4

Начиная с версии Q2 2012 года, поддержка серии штрих-кодов привязывает цвет точки к полю элемента данных.

Это делается через colorField option. Этот пример демонстрирует онлайн-пример Binding to local data.

И Кендо UI и унаследованные обертки для ASP.NET MVC разоблачить его как вариант:

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

Все перегруженные серии можно увидеть here.

Answer 5

Telerik недавно выпустила Кендо UI Data Vis Theme Roller

http://demos.kendoui.com/themebuilder/dataviz.html

Answer 6

Другой способ вы можете сделать это во время выполнения использует функцию, которая возвращает цвет.

API reference

Вот пример кода:

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