使用 highcharts 的背景大小渐变

u0njafvf 于 9个月前发布在 Highcharts

关注(0)|答案(1)|浏览(113)

我使用的是带有Angular 分量的高图，沿着，我使用以下数据制作了一个柱形图。

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
  }

我试图实现的是将accesssGroupUsageData[0]从紫色变为浅蓝色，重复向下，使每列的紫色减少50%以上。低于50%的高度沿着与任何低于50%的高度去从蓝色到浅蓝色。
第一次尝试导致所有列从紫色变成浅蓝色。

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

第二次尝试，使用以下函数，导致所有列都是浅蓝色（手动更改为百分比计算 * 100，颜色仍为浅蓝色）：

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

除了上面提到的，我还在考虑使用styledMode=true，但这会导致比我目前所能做的更多的重构。
链接：这是它目前所做的-https://imgur.com/a/GOtFOKC这是我想要实现的-https://imgur.com/a/CkDIdte

highcharts

来源：https://stackoverflow.com/questions/77224209/background-size-gradients-using-highcharts

1条答案

按热度按时间

yrdbyhpb1#

所以基本上你想达到这样的效果？

Highcharts.chart('container', {
  series: [{
    type: 'column',
    color: {
      linearGradient: [0, 0, 0, 300],
      stops: [
        [0, 'red'],
        [0.5, 'orange'],
        [1, 'green']
      ]
    },
    data: [2, 5, 9, 3, 6, 5]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div id="container"></div>

Demo：https://jsfiddle.net/BlackLabel/4hbxn38v/
API：https://api.highcharts.com/class-reference/Highcharts.GradientColorObject

赞(0）回复(0）举报 9个月前