我使用的是带有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
1条答案
按热度按时间yrdbyhpb1#
所以基本上你想达到这样的效果?
Demo:https://jsfiddle.net/BlackLabel/4hbxn38v/
API:https://api.highcharts.com/class-reference/Highcharts.GradientColorObject