如何以角度绘制excel样式的数据条？答案

【问题标题】：how to draw excel style data bars in angular?如何以角度绘制excel样式的数据条？
【发布时间】：2018-09-30 02:58:32
【问题描述】：

我想在网格中选定列的值后面添加数据栏，例如 Excel 中的 Data Bars Conditional Formatting 选项。

这个answer 向我展示了使用jquery 数据表的东西，任何人都可以在角度6 中给我这个想法。

注意：我没有使用任何第 3 方网格，这是我自己创建的。

它应该看起来像这样。

【问题讨论】：

标签： excel angular typescript angular6

【解决方案1】：

不确定您要在什么情况下添加此内容，但请看一下： https://css-tricks.com/css3-progress-bars/

这是创建可以定义长度的条的经典 HTML 和 CSS“技巧”。

它的基础是你有一个定义最大长度的“包装器”元素，以及一个你设置width: [0-100]%和背景颜色的“bar”元素。

这将是一个关于如何创建 50% 宽的蓝色条的示例。

.wrapper {
    width: 100%;
}

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

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

使用它来创建一个可以将宽度发送到的角度组件，如下所示：

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

【讨论】：

感谢您的建议，但我也需要显示负值。这样，我们可以选择正值，但它会失败。
@Nimishgoel 好吧，有点幻想，你可以从包装器的中间开始有两个酒吧。一个向右表示正值，一个向左表示负值

【解决方案2】：

This 将完成这项工作。

@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;
}

【讨论】：

【解决方案3】：

您可以使用 primeNg 数据表及其单元格格式化功能，我们可以根据特定条件格式化每个单元格，例如更改颜色或绘制它，这可能会对您有所帮助。 PrimeNg Cell Style

【讨论】：

我没有使用任何 3rd 方兄弟，这里是我自己创建的网格。