Question

我正在尝试创建动态颜色范围，以便显示一些数据。例如，如果我有值[1.0, 1.6, 2.3, 2.9, 3.5, 4.2, 4.7, 5.0]，那么我希望能够设置例如1.0为绿色，2.5为黄色，5.0为红色，导致如下所示的屏幕截图

此处显示Angular中的示例：https://stackblitz.com/edit/angular-z32yhk?embed=1&file=app/app.component.ts

我不只是想要从绿色到红色的范围，但它可能是从黄色到紫色。我该怎么做呢？

Answer 1

我会为您提供价值生成功能，您可以*ngFor或根据需要对其进行任何操作。

我正在考虑使用hsl类型颜色来提供不同的颜色。

基色值：hsl(40, 55%, 95%)
高色值：hsl(140, 55%, 95%)

attachColors() {
    const x = [1.0, 1.6, 2.3, 2.9, 3.5, 4.2, 4.7, 5.0];    // Your data
    const baseValue = 40;                                  // Base color value (red)
    const highValue = 140;                                 // Highest color value (green)
    const max = Math.max.apply(null, x);                   // Max value in your data
    const min = Math.min.apply(null, x);                   // Min value in your data
    let y = x.map(v => { 
              return {
                 value: v, 
                 color: (baseValue + (((v - min)/(max - min)) * (highValue - baseValue)))
              }
            });

    // Now "y" holds your data + color value for it
    return y;
}

现在，在您的模板中，您可以这样做：

<li *ngFor="let d of attachColors()" [style.backgroundColor]="'hsl(' + d.color + ', 55%, 95%)'"></li>

Answer 2

一个新的小例子：

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <table style="width:100%">
        <tr>
          <th>value</th>
        </tr>
         <tr [ngStyle]="{'backgroundColor': 'rgba(0, 255, 0, 0.'+ n.toString().split('.')[1]  +')' }" *ngFor="let n of numbers">
          <td >{{n}}</td>
        </tr>
      </table>
    </div>
  `,
})
export class App {
  numbers:float[] = [1.1,1.3,1.4,1.9];
  constructor(){
    for(let n of this.numbers){
      console.log();
    }
  }


  //[ngClass]="{'red': n == 1, 'green': n == 2, 'orange': n == 3
      //          , 'pink': n == 4, 'blue': n == 5}"

}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {

}

Plunkr： https://plnkr.co/edit/ACuGatopbzFQERgRdZp9

您可以计算任何数字范围（1,2,3,4,5 ..）所需的不同颜色，并计算＆amp;与不透明度不同。

基于值的动态颜色范围

2 个答案: