Kendo条形图类别根据值左右标签 [英] Kendo barchart category labels left and right based on value

问题描述

我正在构建一个剑道条形图，它有两个相互镜像的系列。一个系列具有负值而另一个具有正值。我对格式化标签的选择似乎是有限的（根据我对显而易见的选项的评论 - 我不是一个html / javascript大师）将它们放在一边或另一边。我真的希望让它们与条形值一起流动并且显示在相反的位置（即清除条形图）。

I'm building a Kendo bar chart that has two series that "mirror" each other. One series has negative values and the other positive values. My choices for formatting the labels seem to be limited (based on my review of the obvious options - I am not an html/javascript guru) to having them on one side or the other. I would really like to have them flow with the value of the bar and appear opposite (i.e. clear of the bar).

这是我目前的图表

<div id="barchart"></div>
function setUpCharts()
        {
            $("#barchart").kendoChart({            
                title: {
                    text: "Bar Chart"
                },
                legend: {
                    visible: true,
                    position: "bottom"
                },
                seriesDefaults: {
                    type: "bar",
                    stack: true
                },
                series: [{
                    data: [0, 0, .69, .29, .85],
                }, {
                    data: [-.80, -.56, 0, 0, 0],
                }
                ],
                categoryAxis: {
                    categories: ["Cat1", "Cat2", "Cat3", "Cat4", "Cat5"],
                    majorGridLines: { visible: false },
                },
                valueAxis: {
                    numeric: true,
                    line: { visible: false },
                    minorGridLines: { visible: true }
                }
            });
        }

它也位于： http://jsfiddle.net/xamlfishet/3jNn5/1/

任何人都有建议？非常感谢!!!

Anyone have any suggestions? Much appreciated!!!

推荐答案

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

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/

这篇关于Kendo条形图类别根据值左右标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！