且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Kendo条形图类别根据值左右标签

更新时间:2023-08-26 21:58:04

非常感谢包括小提琴!这里的镜像确实非常棘手。您要做的是首先将您的系列与您的数据项相关联。我希望这可以根据您的设置进行。

Thanks SO MUCH for including a fiddle! The mirroring is indeed quite tricky here. What you have to do is to first associate your series with your data items. I hope this is possible based on your setup.

$("#barchart").kendoChart({
  dataSource: {
    data: [
      { field: "Cat 1", left: -.80, right: 0 },
      { field: "Cat 2", left: -.56, right: 0 },
      { field: "Cat 3", left: 0, right: .69 },
      { field: "Cat 4", left: 0, right: .29 },
      { field: "Cat 5", left: 0, right: .58 }
    ],
  }
  series: [{
    field: "right"
   }, {
    field: "left" 
  }]
});

现在每个类别都与数据项相关联,您可以使用模板绝对定位标签根据其是正值还是负值。

Now that each category is associated with a data item, you can use a template to position the label absolutely based on whether its a positive or negative value.

categoryAxis: {
  field: "field",
    labels: {
      template: function(e) {
        if (e.dataItem.right === 0) {
          return "<tspan style='position: absolute' dx='20'>" + e.value + "</tspan>"
        }
        else {
          return "<tspan style='position: absolute' dx='-30'>" + e.value + "</tspan>"
        }
      }
    },
    majorGridLines: {
      visible: false
    },
  },

这是一个工作小提琴...... http://jsfiddle.net/7smar/1/

Here is a working fiddle... http://jsfiddle.net/7smar/1/