【问题标题】:kendo bar chart colors of categories类别的剑道条形图颜色
【发布时间】:2016-03-20 01:22:30
【问题描述】:

请看这里:http://jsbin.com/teveza/edit?html,output

基本上我试图有两个水平条进行比较。我希望他们有一个 categoryAxis 标题并有不同的颜色。而且我不能两者兼得。

到目前为止,我能得到的最接近的是:

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


}

所以....任何关于如何做到这一点的指针将不胜感激

【问题讨论】:

    标签: javascript charts kendo-ui kendo-dataviz kendo-chart


    【解决方案1】:

    系列对象有一个名为 colorField 的属性,可用于此目的: http://docs.telerik.com/KENDO-UI/api/javascript/dataviz/ui/chart#configuration-series.colorField

    您可以通过以下两种方式之一使用它:

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

    【讨论】:

    • 正确。也感谢您在这方面帮助我。我真的必须学会更好地理解剑道 api 参考:-)
    猜你喜欢
    • 1970-01-01
    • 2013-08-19
    • 2023-03-24
    • 1970-01-01
    • 1970-01-01
    • 2020-12-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多