Блог

Главная - Вопросы по программированию - Как генерировать цвета фона для div на основе значения, отображаемого из объекта json.-javascript

Как генерировать цвета фона для div на основе значения, отображаемого из объекта json.-javascript

#javascript

#javascript

Вопрос:

У меня есть объект, который выглядит следующим образом:

введите описание изображения здесь

Я пытаюсь создать 10 divs для каждого ключа (т.е.’publicExploit, activeAttacks .. etc) В показанном объекте и установить цвет фона каждого div в зависимости от значения, т.е.

  • 0: серый
  • 1: желтый
  • 2-4: оранжевый
  • 5 : красный

вот код:

 items: [
  this.info = new Ext.BoxComponent({
    tpl: new Ext.XTemplate(
      '<div class="vuln-summary-status-item">',
      '<div class="vuln-summary-status-item-inner">text1{[this.getEasyExploit(values)]}</div>',
      '<div class="vuln-summary-status-item-inner">text2{[this.getDenialOfService(values)]}</div>',
      '<div class="vuln-summary-status-item-inner">text3{[this.getExploitKit(values)]}</div>',
      '<div class="vuln-summary-status-item-inner">text4{[this.getMalware(values)]}</div>',
      '<div class="vuln-summary-status-item-inner">text5{[this.getHighDataLoss(values)]}</div>',
      '<div class="vuln-summary-status-item-inner">text6{[this.getHighLateralMovement(values)]}</div>',
      '<div class="vuln-summary-status-item-inner">text7{[this.getActiveAttacks(values)]}</div>',
      '</div>', {


        getEasyExploit: function(value) {
          if (value.easyExploit === 0) {
            return '<div class="greyColor">'   value.easyExploit   '</div>'
          } else if (value.easyExploit === 1) {
            return '<div class="yellowColor">'   value.easyExploit   '</div>'
          } else if (value.easyExploit === 2 || value.easyExploit === 3 || value.easyExploit === 4) {
            return '<div class="orangeColor">'   value.easyExploit   '</div>'
          } else if (value.easyExploit >= 5) {
            return '<div class="redColor">'   value.easyExploit   '</div>'
          }
        },
        getDenialOfService: function(value) {
          if (value.denialOfService === 0) {
            return '<div class="greyColor">'   value.denialOfService   '</div>'
          } else if (value.denialOfService === 1) {
            return '<div class="yellowColor">'   value.denialOfService   '</div>'
          } else if (value.denialOfService === 2 || value.denialOfService === 3 || value.denialOfService === 4) {
            return '<div class="orangeColor">'   value.denialOfService   '</div>'
          } else if (value.denialOfService >= 5) {
            return '<div class="redColor">'   value.denialOfService   '</div>'
          }
        },
        getExploitKit: function(value) {
          if (value.exploitKit === 0) {
            return '<div class="greyColor">'   value.exploitKit   '</div>'
          } else if (value.exploitKit === 1) {
            return '<div class="yellowColor">'   value.exploitKit   '</div>'
          } else if (value.exploitKit === 2 || value.exploitKit === 3 || value.exploitKit === 4) {
            return '<div class="orangeColor">'   value.exploitKit   '</div>'
          } else if (value.exploitKit >= 5) {
            return '<div class="redColor">'   value.exploitKit   '</div>'
          }
        },
        getMalware: function(value) {
          if (value.malware === 0) {
            return '<div class="greyColor">'   value.malware   '</div>'
          } else if (value.malware === 1) {
            return '<div class="yellowColor">'   value.malware   '</div>'
          } else if (value.malware === 2 || value.malware === 3 || value.malware === 4) {
            return '<div class="orangeColor">'   value.malware   '</div>'
          } else if (value.malware >= 5) {
            return '<div class="redColor">'   value.malware   '</div>'
          }

        },
        getHighDataLoss: function(value) {
          if (value.highDataLoss === 0) {
            return '<div class="greyColor">'   value.highDataLoss   '</div>'
          } else if (value.highDataLoss === 1) {
            return '<div class="yellowColor">'   value.highDataLoss   '</div>'
          } else if (value.highDataLoss === 2 || value.highDataLoss === 3 || value.highDataLoss === 4) {
            return '<div class="orangeColor">'   value.highDataLoss   '</div>'
          } else if (value.highDataLoss >= 5) {
            return '<div class="redColor">'   value.highDataLoss   '</div>'
          }
        },
        getHighLateralMovement: function(value) {
          if (value.highLateralMovement === 0) {
            return '<div class="greyColor">'   value.highLateralMovement   '</div>'
          } else if (value.highLateralMovement === 1) {
            return '<div class="yellowColor">'   value.highLateralMovement   '</div>'
          } else if (value.highLateralMovement === 2 || value.highLateralMovement === 3 || value.highLateralMovement === 4) {
            return '<div class="orangeColor">'   value.highLateralMovement   '</div>'
          } else if (value.highLateralMovement >= 5) {
            return '<div class="redColor">'   value.highLateralMovement   '</div>'
          }
        },

        getActiveAttacks: function(value) {
          if (value.activeAttacks === 0) {
            return '<div class="greyColor">'   value.activeAttacks   '</div>'
          } else if (value.activeAttacks === 1) {
            return '<div class="yellowColor">'   value.activeAttacks   '</div>'
          } else if (value.activeAttacks === 2 || value.activeAttacks === 3 || value.activeAttacks === 4) {
            return '<div class="orangeColor">'   value.activeAttacks   '</div>'
          } else if (value.activeAttacks >= 5) {
            return '<div class="redColor">'   value.activeAttacks   '</div>'
          }
        },

      }
    )
  })
]

css выглядит:

 .greyColor {
  background: #e9e9e9;
  height: 120px;
}

.yellowColor {
  background: rgb(255, 198, 55);
  height: 120px;
}

.orangeColor: {
  background: rgb(229, 108, 25);
  height: 120px;
}

.redColor: {
  background: rgb(222, 29, 11);
  height: 120px;
}

У меня 2 проблемы:

  1. Я чувствую, что мой способ написания кода слишком неаккуратен, есть ли что-нибудь лучше написания кода для генерации div в зависимости от связанного с ним значения?
  2. Я не могу получить правильное условие для else if(value.denialOfService === 2 || value.denialOfService === 3 || value.denialOfService === 4) здесь я пытаюсь установить div фон, значения которого находятся в пределах 2-4, но не отображаются должным образом.

Есть какие-либо подсказки, как это можно решить

Ответ №1:

Это позволит вам передать текстовое значение для отображения.

 items: [
  this.info = new Ext.BoxComponent({
    tpl: new Ext.XTemplate(
      '<div class="vuln-summary-status-item">',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.easyExploit, "Easy Exploit")]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.denialOfService, "Denial Of Service")]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.exploitKit, "Exploit Kit")]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.malware, "Malware")]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.highDataLoss, "High Data Loss")]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.highLateralMovement, "High Lateral Movement")]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.activeAttacks, "Active Attacks")]}</div>',
      '</div>', {
        colors: [
          'greyColor',
          'yellowColor',
          'orangeColor',
          'redColor'
        ],
        getColor(value) {
          switch(true) {
            case value < 2:
              return colors[value];
              break;
            case value < 5:
              return colors[2];
              break;
            default:
              return colors[4];
              break;
          } 
        },
        getColorDiv: function(value, text) {
          return '<div class="'  this.getColor(value). '">'   text   ": "   value   '</div>';
        }
      }
    )
  })
]

Оригинал

Было бы проще использовать цветовой массив, который позволил бы вам комбинировать ваши функции.

 items: [
  this.info = new Ext.BoxComponent({
    tpl: new Ext.XTemplate(
      '<div class="vuln-summary-status-item">',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.easyExploit)]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.denialOfService)]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.exploitKit)]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.malware)]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.highDataLoss)]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.highLateralMovement)]}</div>',
      '    <div class="vuln-summary-status-item-inner">{[this.getColorDiv(values.activeAttacks)]}</div>',
      '</div>', {
        colors: [
          'greyColor',
          'yellowColor',
          'orangeColor',
          'redColor'
        ],
        getColor(value) {
          switch(true) {
            case value < 2:
              return colors[value];
              break;
            case value < 5:
              return colors[2];
              break;
            default:
              return colors[4];
              break;
          } 
        },
        getColorDiv: function(value) {
          return '<div class="'  this.getColor(value). '">'   value   '</div>';
        }
      }
    )
  })
]

Комментарии:

1. значение, которое я получаю в качестве аргумента для «getColorDiv», является объектом (показано выше), а не фактическим значением (т.е.: 0, 1,2 ..) Есть ли способ настроить это, чтобы сравнить его с фактическим отображаемым значением ..?

2. в вашем вопросе вы передаете values как объект. у меня есть this.getColorDiv(values.easyExploit) , который использует объект и передает значение напрямую. извините, рано нажал Enter. вам просто нужно передать значение 1-5 от каждого объекта в «get Color Div», чтобы функция работала.

3. Нет проблем. Рад слышать, что это сработало. Удачи с вашим приложением.

4. на самом деле, еще одна помощь в его отношении, я хотел также отобразить текст с подсчетом (отредактировано выше в вопросе). Однако на данный момент текст отображается над цветным div, есть ли какой-либо способ, которым я мог бы отобразить это внутри этого div ..?

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