kendo ui - 条形图标签位置根据条件分配

Question

我想根据条件分配条形图标签位置。由于数据量的比例不同，在小数据时会出现标签被截断的现象。

当前标签的位置是"insideEnd"。如果status值为2，可以给outside end选项吗？

这是我的代码

function createExecutionToday(type) {

  $("#" + type).kendoChart({
    dataSource: {
      transport: {
        read: {
          url: "dashboard/" + type + ".json",
          dataType: "json"
        }
      },
      schema: {
        data: function(response) {
          for (i in response) {
            var status = response[i].status;
            response[i].status = toKorean(status);
          }
          return response;
        }
      },
    },
    legend: {
      visible: false
    },
    chartArea: {
      border: {
        width: 10,
        color: "white"

      },
      margin: {
        top: 40,
        left: 20,
        bottom: 30
      },

      background: "#ffffff",
    },
    seriesDefaults: {
      type: "bar",
      labels: {
        visible: true,
        position: "insideEnd",

        template: "#if (value > 0) {# #: value # #}#",
        font: "bold 12px arial",
        background: "transparent"

      },
      overlay: null
    },
    series: [{
      field: "count",
      color: function(status) {
        var colors = ["#DB7196", "#66CCFF", "#E5B055"];
        return colors[status.index];
      },
      border: {
        width: 0
      }
    }],

    categoryAxis: {
      categories: [success, running, check],
      majorGridLines: {
        visible: false
      },
      line: {
        visible: false
      },
      labels: {
        font: "bold 12px arial",
        color: "black",
      }
    },
    valueAxis: {

      labels: {
        format: "{0}%"
      },
      line: {
        visible: false
      },
      labels: {
        visible: false
      },
      majorGridLines: {
        visible: false
      },
    },

  });
}

Answer 1

您可以使用标签的 Visual property 根据状态值甚至栏的宽度重新定位它。

  labels: {
    visible: true,
    position: "insideEnd",
    template: "#if (value > 0) {# #: value # #}#",
    font: "bold 12px arial",
    background: "transparent",
    visual: function(e) {
        if (e.dataItem.status == 2 || e.rect.size.width < 40){
            var x = e.rect.origin.x + e.rect.size.width + 4;
            var y = e.rect.origin.y + (e.rect.size.height - 12)/2;
            return new kendo.drawing.Text(e.text, [x, y], {
                font: "bold 12px arial",
                fill: {
                    color: "black",                             
                }
            });
        } else {
            return e.createVisual();
        }
    }
  },

注意：return e.createVisual(); 绘制默认标签

kendo ui - 条形图标签位置根据条件分配

kendo ui - barchart labels position assign depending on the conditions

kendo-ui

bar-chart

kendo-chart

DEMO