基于值的动态颜色范围答案

【问题标题】：Dynamic colour range based on value基于值的动态颜色范围
【发布时间】：2018-05-07 09:27:19
【问题描述】：

我正在尝试创建一个动态颜色范围，以便显示一些数据。例如，如果我有值 [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

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

【问题讨论】：

首先创建和共享任何 plunker 或示例。
@RohanFating 我不知道如何实现我的要求，这就是我首先要问的原因，而且我认为我的帖子很清楚，没有笨拙的人。
虽然您的要求很清楚，但如果您至少提供骨架结构代码，我们将不胜感激，这样我们就不需要从头开始工作了。尊重他人的时间。
背景颜色应该影响到哪种元素？一个 div，一个表格单元格，...？
@Mr_Green 我添加了一个例子。

标签： angular

【解决方案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>

【讨论】：

我试着让它工作，但它实际上并没有应用这种风格。附带说明：使用const 而不是let。
我提供的模板示例不是经过测试的。我测试了根据需要返回值的函数。
@Esoemah 这样做应该可行.. stackoverflow.com/a/38663363/1577396
我修复了它，但由于某种原因颜色并不正确。
哦，太好了。好吧，您可以使用范围，即基值和高值。甚至可以尝试更改hsl颜色的其他参数。

【解决方案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..）的不同颜色，并计算和区分不透明度。

【讨论】：

我说的是动态的，不是静态的。您实际上是在手动将颜色分配给离散值...例如 1.2 或 2.4 怎么样？我希望它们的颜色分别不同于1 和2。