javascript - Kendo 条形图类别标签左右基于值

Question

我正在构建一个 Kendo 条形图，它有两个相互“镜像”的系列。一个系列具有负值，另一个具有正值。我对标签格式的选择似乎受到限制(基于我对明显选项的评论 - 我不是 html/javascript 大师)将它们放在一侧或另一侧。我真的很想让它们随着条​​形图的值流动并出现在相反的位置(即远离条形图)。

这是我当前的图表

<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/

有人有什么建议吗？非常感谢!!!

Answer 1

非常感谢您提供 fiddle !镜像在这里确实很棘手。您要做的是首先将您的系列与您的数据项相关联。我希望根据您的设置这是可能的。

$("#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" 
  }]
});

现在每个类别都与一个数据项相关联，您可以使用模板根据标签的正值或负值来绝对定位标签。

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
    },
  },

这是一个工作 fiddle ... http://jsfiddle.net/7smar/1/