Гистограмма кендо цвета категорий

Question

Пожалуйста, смотрите здесь: http://jsbin.com/teveza/edit?html,output

В основном я пытаюсь иметь две горизонтальные полосы для сравнения. Я хочу, чтобы у них был заголовок категории Axis и разные цвета. И я не могу получить оба.

Пока самое близкое, что я могу получить, это:

{
  seriesColors: ["red", "green"],  
  "seriesDefaults": {
    "type": "bar"
  },
  series: [
    { data: [2,3] },
  ],  
  categoryAxis:{
    categories:["Red Category","Green Category"],
    lables:{
      visible:true, }
  }


}

Так что.... любые советы о том, как это сделать, будут оценены

Answer 1

У объекта серии есть свойство colorField, которое можно использовать для этого: http://docs.telerik.com/KENDO-UI/api/javascript/dataviz/ui/chart

Вы можете использовать его одним из следующих двух способов:

Обновленный JSBIN

$("#chart1").kendoChart({
  theme: "flat",
  dataSource: {
    data:[
    {key: "Red Category", value: "2", usercolor: "red"},
    {key: "Green Category", value: "3", usercolor: "green"},
  ]},
  seriesDefaults: {
    type: "bar", 
  },
  series: [{ 
      field: "value",
      categoryField: "key",
      colorField: "usercolor",
  }],  
});

$("#chart2").kendoChart({
  theme: "flat",
  seriesDefaults: {
    type: "bar", 
  },
  series: [{ 
      field: "value",
      colorField: "usercolor",
      data: [
        {value: "2", usercolor: "red"},
        {value: "3", usercolor: "green"},
      ],
  }],  
  categoryAxis:{
    categories:["Red Category", "Green Category"],
  }
});