前面的两篇文章【动画效果(八),动画效果(九)】中,我们只需要统计产品和地区,如果现在增加一个统计项目——销售渠道,那么使用之前的堆叠条形图和分组条形图都不适合。我们可以将两者结合,使用分组+堆叠条形图,实际效果如下图所示:
如上图,我们使用同一种颜色的不同透明度表示不同的销售渠道,为了实现不同的透明度,我们需要先更新一下color_palette.dart文件的代码:
导入的包:颤振/material.dart ';
进口的飞镖:数学;
类ColorPalette {
静态最终ColorPalette主=new ColorPalette (& lt; Color>
Colors.blue [400],
Colors.red [400],
Colors.green [400],
Colors.yellow [400],
Colors.purple [400],
Colors.orange [400],
Colors.teal [400],
]);
ColorPalette (List颜色颜色):_colors={
断言(colors.isNotEmpty);
}
工厂ColorPalette。单色(颜色,int长度){
返回新ColorPalette (
新List.generate (
长度,
(我)=比;_brighterColor(基地,我,长度)
)
)；
}
_brighterColor静态颜色(颜色基地,int, int n) {/*
const Color.fromARGB (
int,
int r,
int g,
int b
)
从四个整数的低8位构造一个颜色
答:一个是α值,0是透明的,255是完全不透明的
r:为红色,从0到255
g: g为红色,从0到255
b: b为红色,从0到255
*/返回新Color.fromARGB (/*
intα
这个颜色的α通道是8位值
值为0表示此颜色完全透明。值为255表示此颜色完全不透明
*/base.alpha,
_brighterComponent(基地。红色,我,n),
_brighterComponent(基地。绿色,我,n),
_brighterComponent(基地。蓝色,我,n)
)；
}
静态int _brighterComponent (int, int, int n) {
返回(基础+ i *(255 -基)/n) .floor ();
}
最后List_colors;
颜色运营商[](int指数)=比;_colors(指数%长度);
int得到长度=比;_colors.length;
颜色随机(随机随机)=比;这(random.nextInt(长度)];
}
最后我们再更新一下bar.dart文件的代码:
导入的包:颤振/material.dart ';
导入的包:颤振/animation.dart ';
进口的飞镖:ui显示lerpDouble;
进口的飞镖:数学;
进口“color_palette.dart”;
进口“tween.dart”;
柱形图表类{
柱形图表(this.groups);
最后List组织;
工厂的柱形图表。空(尺寸大小){
返回新柱形图表(& lt; BarGroup> []);
}
工厂的柱形图表。随机(尺寸大小,随机随机){
const groupWidthFraction=0.75;
const stackWidthFraction=0.9;
最后groupRanks=_selectRanks(随机,5);
最后groupCount=groupRanks.length;
最后groupDistance=大小。宽/(1 + groupCount);
最后groupWidth=groupDistance * groupWidthFraction;
最后startX=groupDistance - groupWidth/2;
最后stackRanks=_selectRanks(随机,ColorPalette.primary。长度~/2);
最后stackCount=stackRanks.length;
最后stackDistance=groupWidth/stackCount;
最后stackWidth=stackDistance * stackWidthFraction;
最后一组=new List.generate (
groupCount,
(我){
最后栈=new List.generate (
stackCount,
(j) {
最后的baseColor=ColorPalette.primary [stackRanks [j]];
最后barRanks=_selectRanks(随机的,4);
最后的单色=new ColorPalette。单色(baseColor 4);
最后酒吧=new List.generate (
barRanks.length,
(k)=比;新栏(
barRanks [k],
random.nextDouble() *大小。高度/2,
单色(barRanks [k]],
)
)；
返回新BarStack (
stackRanks [j],
baseColor,
startX + i * groupDistance + j * stackDistance,
stackWidth,
酒吧,
)；
}
)；
返回新BarGroup (
groupRanks[我],
栈
)；
}
)；
返回新柱形图表(组);
}
静态List_selectRanks(随机随机,int帽){
最终排名=& lt; int> [];
var排名=0;
而(真){
等级+=random.nextInt (2);
如果(帽& lt;=排名)休息;
ranks.add(等级);
等级+ +;
}
返回排名;
}
}
类BarChartTween延伸Tween｛
BarChartTween(柱形图表开始,柱形图表)
:_groupsTween=new MergeTween
