Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit9b1306a

Browse files
authored
feature: make above/below colors in filler plugin work with pivoted line charts (#12058)
* adapted filler plugin to make above/below colors work with pivoted line chartsresolved conflicts in src/plugins/plugin.filler/filler.drawing.js* fixed doFill; added tests
1 parent817bec0 commit9b1306a

File tree

3 files changed

+93
-7
lines changed

3 files changed

+93
-7
lines changed

‎src/plugins/plugin.filler/filler.drawing.js‎

Lines changed: 47 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,24 @@ function doFill(ctx, cfg) {
2424

2525
ctx.save();
2626

27-
if(property==='x'&&below!==above){
28-
clipVertical(ctx,target,area.top);
29-
fill(ctx,{line, target,color:above, scale, property, clip});
30-
ctx.restore();
31-
ctx.save();
32-
clipVertical(ctx,target,area.bottom);
27+
letfillColor=below;
28+
if(below!==above){
29+
if(property==='x'){
30+
clipVertical(ctx,target,area.top);
31+
fill(ctx,{line, target,color:above, scale, property, clip});
32+
ctx.restore();
33+
ctx.save();
34+
clipVertical(ctx,target,area.bottom);
35+
}elseif(property==='y'){
36+
clipHorizontal(ctx,target,area.left);
37+
fill(ctx,{line, target,color:below, scale, property, clip});
38+
ctx.restore();
39+
ctx.save();
40+
clipHorizontal(ctx,target,area.right);
41+
fillColor=above;
42+
}
3343
}
34-
fill(ctx,{line, target,color:below, scale, property, clip});
44+
fill(ctx,{line, target,color:fillColor, scale, property, clip});
3545

3646
ctx.restore();
3747
}
@@ -66,6 +76,36 @@ function clipVertical(ctx, target, clipY) {
6676
ctx.clip();
6777
}
6878

79+
functionclipHorizontal(ctx,target,clipX){
80+
const{segments, points}=target;
81+
letfirst=true;
82+
letlineLoop=false;
83+
84+
ctx.beginPath();
85+
for(constsegmentofsegments){
86+
const{start, end}=segment;
87+
constfirstPoint=points[start];
88+
constlastPoint=points[_findSegmentEnd(start,end,points)];
89+
if(first){
90+
ctx.moveTo(firstPoint.x,firstPoint.y);
91+
first=false;
92+
}else{
93+
ctx.lineTo(clipX,firstPoint.y);
94+
ctx.lineTo(firstPoint.x,firstPoint.y);
95+
}
96+
lineLoop=!!target.pathSegment(ctx,segment,{move:lineLoop});
97+
if(lineLoop){
98+
ctx.closePath();
99+
}else{
100+
ctx.lineTo(clipX,lastPoint.y);
101+
}
102+
}
103+
104+
ctx.lineTo(clipX,target.first().y);
105+
ctx.closePath();
106+
ctx.clip();
107+
}
108+
69109
functionfill(ctx,cfg){
70110
const{line, target, property, color, scale, clip}=cfg;
71111
constsegments=_segments(line,target,property);
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
module.exports={
2+
config:{
3+
type:'line',
4+
data:{
5+
labels:[1,2,3,4],
6+
datasets:[
7+
{
8+
data:[200,400,200,400],
9+
cubicInterpolationMode:'monotone',
10+
tension:0.4,
11+
spanGaps:true,
12+
borderColor:'blue',
13+
pointRadius:0,
14+
fill:{
15+
target:1,
16+
below:'rgba(255, 0, 0, 0.4)',
17+
above:'rgba(53, 221, 53, 0.4)',
18+
}
19+
},
20+
{
21+
data:[400,200,400,200],
22+
cubicInterpolationMode:'monotone',
23+
tension:0.4,
24+
spanGaps:true,
25+
borderColor:'orange',
26+
pointRadius:0,
27+
},
28+
]
29+
},
30+
options:{
31+
indexAxis:'y',
32+
// maintainAspectRatio: false,
33+
plugins:{
34+
filler:{
35+
propagate:false
36+
},
37+
datalabels:{
38+
display:false
39+
},
40+
legend:{
41+
display:false
42+
},
43+
}
44+
}
45+
}
46+
};
50.8 KB
Loading

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp