Question

我正在构建一个剑道条形图，它有两个相互“镜像”的系列。一个系列具有负值而另一个具有正值。我对格式化标签的选择似乎是有限的（根据我对显而易见的选项的评论 - 我不是一个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

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

$("#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
    },
  },

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

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

1 个答案: