kendo条形图颜色的类别 [英] kendo bar chart colors of categories

问题描述

请参阅这里： http://jsbin.com/teveza/edit?html,output

基本上我想有两个水平条用于比较。我想让他们有一个categoryAxis标题，并有不同的颜色。

到目前为止，我可以得到的最接近的是：

  {
 seriesColors：[red，green]，
seriesDefaults：{
type：bar
}，
系列：[
 {data：[2,3]}，
]，
 categoryAxis：{
 categories：[Red Category，Green Category 
 lables：{
 visible：true，} 
} 
 
 
} 
  
解决方案
 
 
 < 
系列对象有一个名为colorField的属性，可用于此：
  http://docs.telerik.com/KENDO-UI/api/javascript/dataviz/ui/chart#configuration-series.colorField  
 
 
 
您可以使用以下两种方式之一：
 
 
已更新 < a href =http://jsbin.com/gupila/1/edit?html,output =nofollow> JSBIN   
 
 
 
 
 
  $（＃chart1）。kendoChart（{
 theme：flat，
 dataSource：{
 data：[
 {key：Red Category，value：2，usercolor：red}，
 {key：Green Category，value：3 green}，
]}，
 seriesDefaults：{
 type：bar，
}，
 series：[{
 field： ，
 categoryField：key，
 colorField：usercolor，
}]，
}）; 
 
 $（＃chart2）。kendoChart（{
 theme：flat，
 seriesDefaults：{
 type：bar，
 } 
系列：[{
字段：value，
 colorField：usercolor，
 data：[
 {value：2，usercolor： red}，
 {value：3，usercolor：green}，
]，
} Red Category，Green Category]，
} 
}）; 
  
 
Please see here: http://jsbin.com/teveza/edit?html,output

Basically I'm trying to have two horisontal bars for comparison. I want them to have a categoryAxis title and have different colors. And I cannot get both.

So far the closest I can get is this:
{
  seriesColors: ["red", "green"],  
  "seriesDefaults": {
    "type": "bar"
  },
  series: [
    { data: [2,3] },
  ],  
  categoryAxis:{
    categories:["Red Category","Green Category"],
    lables:{
      visible:true, }
  }


}
So.... any pointers on how to do that will be appreciated
解决方案
The series object has a property called colorField that can be used for this:
http://docs.telerik.com/KENDO-UI/api/javascript/dataviz/ui/chart#configuration-series.colorField

You can use it in one of the following 2 ways:

  
Updated 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"],
  }
});


                        
这篇关于kendo条形图颜色的类别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！