วิธีการวาดแถบข้อมูลสไตล์ Excel ใน Angular?

ฉันต้องการเพิ่มแถบข้อมูลด้านหลังค่าต่าง ๆ ในคอลัมน์ที่เลือกในกริดของฉันเหมือนกับตัวเลือกการจัดรูปแบบตามเงื่อนไขแถบข้อมูลใน Excel

คำตอบนี้แสดงให้ฉันเห็นสิ่งที่ใช้ตารางข้อมูล jquery มีใครสามารถให้แนวคิดสำหรับเรื่องนี้ใน Angular 6 บ้าง

หมายเหตุ: ฉันไม่ได้ใช้กริดของบุคคลที่สามใด ๆ ฉันได้สร้างกริดนี้ขึ้นเอง

มันควรจะดูประมาณแบบนี้

คำตอบ #1

ไม่แน่ใจว่าสถานการณ์ใดที่คุณต้องการเพิ่มสิ่งนี้ แต่ลองดูนี่: https://css-tricks.com/css3-progress-bars/

นี่คือเทคนิค HTML และ CSS แบบคลาสสิกในการสร้างแถบที่คุณสามารถกำหนดความยาวได้

พื้นฐานของมันคือคุณมีองค์ประกอบ "wrapper" ที่กำหนดความยาวสูงสุด และมีองค์ประกอบ "bar" อยู่ภายในที่คุณตั้งค่า width: [0-100]% และสีพื้นหลังของมัน

นี่จะเป็นตัวอย่างเกี่ยวกับวิธีสร้างแถบสีน้ำเงินกว้าง 50%

.wrapper {
    width: 100%;
}

.bar {
    background: blue;
    height: 5px;
}

<div class="wrapper">
    <div class="bar" style="width: 50%"></div>
</div>

ใช้สิ่งนั้นเพื่อสร้างคอมโพเนนต์ Angular ที่คุณสามารถส่งความกว้างของคุณไปให้ได้ ประมาณนี้:

import { Component, Input } from '@angular/core';

@Component({
    selector: 'app-bar',
    template: `
      <div class="wrapper">
          <div class="bar" [style.width]="width"></div>
      </div>
    `,
    styles: [`
    .wrapper {
        width: 100%;
    }
    .bar {
        background: blue;
        height: 5px;
    }
    `]
})

export class BarComponent {
    @Input() width: number;
}

คำตอบ #2

นี่จะทำงานได้

@Component({
  selector: 'my-app',
  template: `
  <div class="holder">
    <div class="bar" *ngFor="let item of data">
      <div #bar class="{{item >= 0 ? 'positive' : 'negative'}}">
        <div class="size" [style.width.px]="getWidth(item, bar)">
          {{item}}
        </div>
      </div>
    </div>
  </div>
  `
})
class AppComponent {  
  maxValue = 100;  
  data: Number[] = [
    10,20,30,-45,90,-90,-80,50,100
  ]

  getWidth(dataItem: number, bar: HTMLElement):number {
    return (parseInt(bar.offsetWidth) / this.maxValue)  * Math.abs(dataItem);
  }
}

CSS :

.holder {
  border: 1px solid black;
  margin: 10px;
  padding: 5px;
  width: 200px;
}

.bar {
  border: 1px solid grey;
  padding: 3px;
  margin: 10px 5px;
  text-align: center;
}

.positive {
  color: blue;
  width: 90px;
  margin-left: 90px;
}

.negative {
  color: red;
  width: 90px;
  margin-right: 90px;

  .size {
    margin-left: auto
  }
}

.size {
  background: green;
}