当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - kendo bar chart colors of categories

问题描述:

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"],
  }
});
分享给朋友:
您可能感兴趣的文章:
随机阅读: