剑道条形图类别标签基于值的左右

Kendo barchart category labels left and right based on value

本文关键字：于值 左右 标签 条形图      更新时间：2023-09-26

我正在构建一个剑道条形图，其中包含两个相互"镜像"的序列。 一个序列具有负值，另一个序列具有正值。 我对标签格式的选择似乎仅限于将它们放在一侧或另一侧（基于我对明显选项的审查 - 我不是 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/

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

非常感谢

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

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

相关文章：