Kendo ui 剑道图-根据数据值更改类别轴标签位置

我正在显示剑道柱形图。我有一个要求，改变categoryAxis标签的位置，根据正负值，使他们不与酒吧重叠。如下图所示。我尝试了label rotation属性，但不管它的值如何，它都会应用于所有的条。是否有任何解决办法来实现这一点

---

您可以使用轴交叉值属性 这是文件吗

它们可以设置为两个轴，这将使标签在正确的位置

这是一个样本

<div id="chart"></div>
<script>
  
  var myMinValue = -8;
  
$("#chart").kendoChart({
    series: [{
      data: [-4,-7,10]
    }],
    categoryAxes: [{
      categories: ["A", "B", "C"]
    }],
    valueAxis:  {
      axisCrossingValues: myMinValue
    }
});
</script>

var myMinValue=-8；
$（“#图表”）。肯多卡特({
系列：[{
数据：[-4，-7,10]
}],
类别：[{
类别：[“A”、“B”、“C”]
}],
valueAxis：{
axisCrossingValues:myMinValue
}
});

---

假设您将最小数字的值传递给变量myMinValue

，您可以使用轴交叉值属性 这是文件吗

它们可以设置为两个轴，这将使标签在正确的位置

这是一个样本

<div id="chart"></div>
<script>
  
  var myMinValue = -8;
  
$("#chart").kendoChart({
    series: [{
      data: [-4,-7,10]
    }],
    categoryAxes: [{
      categories: ["A", "B", "C"]
    }],
    valueAxis:  {
      axisCrossingValues: myMinValue
    }
});
</script>

var myMinValue=-8；
$（“#图表”）。肯多卡特({
系列：[{
数据：[-4，-7,10]
}],
类别：[{
类别：[“A”、“B”、“C”]
}],
valueAxis：{
axisCrossingValues:myMinValue
}
});

---

假设您将最小数字的值传递给变量myMinValue

除了调整图表的轴交叉值之外，您还可以覆盖

标签

对象中的

可视
处理程序，这有助于获得自定义的像素外观。您可以找到有关函数的文档

下面是一种方法的示例代码：

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    seriesDefaults: {
      type: "column",
      color: "#FFFF00",
      labels: {
        visible: true,
        visual: adjustLabels,
        template: "#: series.name  #"
      },
    },
    series: [
      { name : "abc", data: [ 5 ] },
      { name : "pqr", data: [ 3 ] },
      { name : "xsd", data: [ 6 ] },
      { name : "lkm", data: [ -3 ] },
      { name : "hyu", data: [ -6 ] },
      { name : "jui", data: [ 4 ] },
      { name : "qas", data: [ 5 ] },
      { name : "ghy", data: [ -8 ] },
    ]
  });

  function adjustLabels(e) {    
    var layout = new kendo.drawing.Layout(e.rect);
    
    if (e.stackValue < 0) {
     // put the label above the x-axis 
        var label = new kendo.drawing.Text(
        e.text, 
        [e.rect.origin.x, 163]
      );  
    } else {
      // put the label below the x-axis
      var label = new kendo.drawing.Text(
        e.text, 
        [e.rect.origin.x, 185]
      ); 
    }
    
    layout.append(label);
    //layout.reflow(); //uncomment this line to make the labels appear at the end of the bars
    return layout;
  }
</script>


$（“#图表”）。肯多卡特({
系列默认值：{
键入：“列”，
颜色：“FFFF00”，
标签：{
可见：对，
视觉：调整标签，
模板：“#：series.name”
},
},
系列：[
{名称：“abc”，数据：[5]}，
{名称：“pqr”，数据：[3]}，
{name:“xsd”，数据：[6]}，
{名称：“lkm”，数据：[-3]}，
{名称：“hyu”，数据：[-6]}，
{名称：“jui”，数据：[4]}，
{名称：“qas”，数据：[5]}，
{名称：“ghy”，数据：[-8]}，
]
});
功能标签（e）{
var布局=新剑道.绘图.布局（e.rect）；
如果（如stackValue<0）{
//将标签置于x轴上方
var label=新建kendo.drawing.Text(
e、 文本，
[e.rect.origin.x163]
);  
}否则{
//将标签放在x轴下方
var label=新建kendo.drawing.Text(
e、 文本，
[e.rect.origin.x185]
); 
}
布局。附加（标签）；
//layout.reflow（）；//取消对此行的注释，使标签显示在条形图的末尾
返回布局；
}

您还可以查看我制作的dojo示例，查看它的运行情况。
除了调整图表的轴交叉值外，您还可以覆盖
标签
对象中的
可视化
处理程序，这有助于获得自定义的像素外观。您可以找到有关函数的文档

下面是一种方法的示例代码：

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    seriesDefaults: {
      type: "column",
      color: "#FFFF00",
      labels: {
        visible: true,
        visual: adjustLabels,
        template: "#: series.name  #"
      },
    },
    series: [
      { name : "abc", data: [ 5 ] },
      { name : "pqr", data: [ 3 ] },
      { name : "xsd", data: [ 6 ] },
      { name : "lkm", data: [ -3 ] },
      { name : "hyu", data: [ -6 ] },
      { name : "jui", data: [ 4 ] },
      { name : "qas", data: [ 5 ] },
      { name : "ghy", data: [ -8 ] },
    ]
  });

  function adjustLabels(e) {    
    var layout = new kendo.drawing.Layout(e.rect);
    
    if (e.stackValue < 0) {
     // put the label above the x-axis 
        var label = new kendo.drawing.Text(
        e.text, 
        [e.rect.origin.x, 163]
      );  
    } else {
      // put the label below the x-axis
      var label = new kendo.drawing.Text(
        e.text, 
        [e.rect.origin.x, 185]
      ); 
    }
    
    layout.append(label);
    //layout.reflow(); //uncomment this line to make the labels appear at the end of the bars
    return layout;
  }
</script>


$（“#图表”）。肯多卡特({
系列默认值：{
键入：“列”，
颜色：“FFFF00”，
标签：{
可见：对，
视觉：调整标签，
模板：“#：series.name”
},
},
系列：[
{名称：“abc”，数据：[5]}，
{名称：“pqr”，数据：[3]}，
{name:“xsd”，数据：[6]}，
{名称：“lkm”，数据：[-3]}，
{名称：“hyu”，数据：[-6]}，
{名称：“jui”，数据：[4]}，
{名称：“qas”，数据：[5]}，
{名称：“ghy”，数据：[-8]}，
]
});
功能标签（e）{
var布局=新剑道.绘图.布局（e.rect）；
如果（如stackValue<0）{
//将标签置于x轴上方
var label=新建kendo.drawing.Text(
e、 文本，
[e.rect.origin.x163]
);  
}否则{
//将标签放在x轴下方
var label=新建kendo.drawing.Text(
e、 文本，
[e.rect.origin.x185]
); 
}
布局。附加（标签）；
//layout.reflow（）；//取消对此行的注释，使标签显示在条形图的末尾
返回布局；
}

您也可以查看我制作的dojo示例，以查看它的运行。
作为剑道图表的新手，我不明白该属性如何满足我的要求。我也找不到合适的示例。请发布一些代码，以便我可以使用代码示例更改我的答案。谢谢您的快速帮助。我已经创建了这个示例代码。您可以看到标签在条上重叠。请指导我如何消除重叠问题。作为剑道图表的新手，我不明白这个属性如何满足我的要求。我也找不到合适的示例。请发布一些代码，以便我可以使用代码示例更改我的答案。谢谢您的快速帮助。我已经创建了这个示例代码。您可以看到标签在条上重叠。请指导我如何消除重叠问题。从这个例子来看一切都很好！我一定会尝试一下，然后发布我的回复。非常感谢：）我尝试了你共享的代码。我正在使用categoryAxis字段显示标签。我创建了下面的dojo示例。它适用于短标签。但是长标签相互重叠。我尝试了旋转：自动属性。但它不起作用。你能提出一些避免重叠的建议吗？我不知道有什么简单的方法可以解决这个问题，你最好用另一个问题来回答。没有问题。谢谢你的帮助。我在Telerik的帮助下解决了这个问题。下面是一个工作示例，以防任何人遇到此类问题。从示例中看，一切都很好！我一定会试试这个，p