kendo ui - назначение меток в виде диаграммы в зависимости от условий - PullRequest
Новая
       15

kendo ui - назначение меток в виде диаграммы в зависимости от условий

0 голосов
/ 19 февраля 2019

Я хочу назначить расположение меток в зависимости от условий.Поскольку соотношение количества данных отличается, существует явление, при котором метка обрезается в небольших данных.

Положение текущей метки равно "insideEnd".Если значение состояния равно 2, могу ли я указать внешний конец?

вот мой код 

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

  });
}

1 Ответ

0 голосов
/ 20 февраля 2019

Вы можете использовать Визуальное свойство метки, чтобы переместить его в зависимости от значения статуса или даже ширины полосы. 

  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(); рисует метку по умолчанию

DEMO

...