Css 使用高图的背景大小渐变

我正在使用带有Angular 分量的HighChart，同时我正在使用以下数据制作柱状图.

  accessGroupUsageData: AnalyticsStatus[] = [
    { y: 430, name: 'Public', percent: Math.round((430 / 4185) * 100) }, 
    { y: 430, name: 'Executivers', percent: Math.round((430 / 4185) * 100) },
    { y: 400, name: 'Convention Grounds', percent: Math.round((400 / 4185) * 100) },
    { y: 400, name: 'Group 4', percent: Math.round((400 / 4185) * 100) },
    { y: 400, name: 'Group 5', percent: Math.round((400 / 4185) * 100) },
    { y: 350, name: 'Group 6', percent: Math.round((350 / 4185) * 100) },
    { y: 350, name: 'Group 7', percent: Math.round((350 / 4185) * 100) },
    { y: 300, name: 'Group 8', percent: Math.round((300 / 4185) * 100) },
    { y: 250, name: 'Group 9', percent: Math.round((250 / 4185) * 100) },
    { y: 250, name: 'Group 10', percent: Math.round((250 / 4185) * 100) },
    { y: 225, name: 'Group 11', percent: Math.round((225 / 4185) * 100) },
    { y: 200, name: 'Group 12', percent: Math.round((200 / 4185) * 100) },
    { y: 200, name: 'Group 13', percent: Math.round((200 / 4185) * 100) }
  ]
// here are the colors
  gradientColors = {
    purple: 'var(--analytics-gradient-purple, #ffffff)', //#9379F9
    blue: 'var(--analytics-gradient-blue, #ffffff)', // #56A5FB
    lightblue: 'var(--analytics-gradient-lightblue, #ffffff)' // #35BDDC
  }

我想要实现的是 AccessGroupUsageData[0]为紫色到浅蓝色， 对每一列重复向下，以50%以上的紫色减少.50%以下的高度和任何50%以下的高度都可以从蓝色到浅蓝色.

第一次try 时，所有的柱子都从紫色变成了浅蓝色.

series: [
        {
          name: undefined,
          legendSymbol: undefined,
          color: {
            linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
            stops: [
              [0, this.gradientColors.purple], // start 
              [0.5, this.gradientColors.blue], // middle
              [1, this.gradientColors.lightblue] // end
            ],

          },
          type: 'column',
          borderRadius: 0,
          borderWidth: 0,
          zIndex: 3,
          stickyTracking: false,
          tooltip: {
            followPointer: false,
          },
          data: this.chartDataSource
        }
      ]

第二次try ，结果是所有列都是淡蓝色(并且手动更改为Percent Calculate*100仍然将 colored颜色 保留为浅蓝色)，使用以下函数:

calculateGradientStops(data: number[]): Highcharts.GradientColorObject {
    const max = Math.max(...data);
    const stops: Highcharts.GradientColorStopObject[] = [];

    data.forEach(value => {
      const percent = value / max;
      if (percent <= .5) {
        stops.push([percent, this.gradientColors.purple]);
      } else {
        stops.push([percent, this.gradientColors.blue]);
      }
    });

    console.log(stops)

    return {
      linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
      stops: stops
    }
  }

除了上面的内容，我还在考虑使用style模式=true，但这会导致比目前所能做的更多的重构.

链接: 这就是它目前所做的-https://imgur.com/a/GOtFOKC 这就是我想要实现的--https://imgur.com/a/CkDIdte