Skip to content

Commit 91b7132

Browse files
eric-voideric-void
committed
- line chart: changed the way labels are drawn and spaced on x axis (fix for labelsHideCovered)
git-svn-id: http://elycharts.googlecode.com/svn/trunk@29 d12c1f63-3eea-9699-2b47-88fa03d2d012
1 parent 7cf4408 commit 91b7132

File tree

4 files changed

+86
-55
lines changed

4 files changed

+86
-55
lines changed

‎dist/elycharts.js

+42-27
Original file line numberDiff line numberDiff line change
@@ -3630,49 +3630,64 @@ $.elycharts.line = {
36303630
var labelsCenter = props.labelsCenter;
36313631
if (labelsCenter == 'auto')
36323632
labelsCenter = (env.indexCenter == 'bar');
3633+
var hideLabelsUntilX = 0; // Used for labelsHideCovered
36333634

36343635
if (axis.x && axis.x.props.labels)
36353636
for (i = 0; i < labels.length; i++)
36363637
if (labels[i]) {
3638+
36373639
if (axis.x.props.labelsSkip && i < axis.x.props.labelsSkip)
36383640
labels[i] = false;
36393641
else if (typeof labels[i] != 'boolean' || labels[i]) {
36403642
val = labels[i];
36413643
if (axis.x.props.labelsFormatHandler)
36423644
val = axis.x.props.labelsFormatHandler(val);
36433645
txt = (axis.x.props.prefix ? axis.x.props.prefix : "") + labels[i] + (axis.x.props.suffix ? axis.x.props.suffix : "");
3644-
labx = (labelsCenter && axis.x.props.labelsAnchor != "start" ? Math.round(deltaBarX / 2) : 0) + opt.margins[3] + i * (labelsCenter ? deltaBarX : deltaX) + (axis.x.props.labelsMargin ? axis.x.props.labelsMargin : 0);
3646+
labx = opt.margins[3] + i * (labelsCenter ? deltaBarX : deltaX) + (axis.x.props.labelsMargin ? axis.x.props.labelsMargin : 0);
36453647
laby = opt.height - opt.margins[2] + axis.x.props.labelsDistance;
36463648
labe = paper.text(labx, laby, txt).attr(axis.x.props.labelsProps).toBack();
3647-
if (axis.x.props.labelsRotate)
3648-
// Rotazione label
3649-
labe.attr({"text-anchor" : axis.x.props.labelsRotate > 0 ? "start" : "end"}).rotate(axis.x.props.labelsRotate, labx, laby).toBack();
3650-
else if (props.nx == 'auto' && labx + labe.getBBox().width / (axis.x.props.labelsAnchor && axis.x.props.labelsAnchor == "start" ? 1 : 2) > opt.width) {
3651-
// Il label has overflow on the right => delete it (if nx = auto)
3652-
labe.hide();
3653-
labels[i] = false;
3654-
} else if (props.nx == 'auto' && (!axis.x.props.labelsAnchor || axis.x.props.labelsAnchor != "start") && labx - labe.getBBox().width / 2 < 0) {
3655-
// Il label has overflow on the left => delete it (if nx = auto and labelsAnchor != start)
3656-
labe.hide();
3657-
labels[i] = false;
3658-
} else if (axis.x.props.labelsAnchor && axis.x.props.labelsAnchor == "start") {
3649+
var startlabe, endlabe; // Used for labelsHideCovered
3650+
if (axis.x.props.labelsAnchor && axis.x.props.labelsAnchor == "start") {
36593651
// label not rotated buth with a labelsAnchor
36603652
labe.attr({"text-anchor" : "start"});
3661-
lw = labe.getBBox().width + (axis.x.props.labelsMargin ? axis.x.props.labelsMargin : 0) + (axis.x.props.labelsMarginRight ? axis.x.props.labelsMarginRight : 0) - (labelsCenter ? deltaBarX : deltaX);
3662-
if (axis.x.props.labelsHideCovered && lw > 0) {
3663-
j = i + Math.ceil(lw / (labelsCenter ? deltaBarX : deltaX));
3664-
for (; i < j && i + 1 < labels.length; i++)
3665-
labels[i + 1] = false;
3666-
}
3667-
} else if (axis.x.props.labelsHideCovered) {
3668-
// Manages labelsHideCovered with labelsAnchor != 'start'
3669-
lw = (labe.getBBox().width + (axis.x.props.labelsMargin ? axis.x.props.labelsMargin : 0) + (axis.x.props.labelsMarginRight ? axis.x.props.labelsMarginRight : 0)) / 1 - (labelsCenter ? deltaBarX : deltaX);
3670-
if (lw > 0) {
3671-
j = i + Math.ceil(lw / (labelsCenter ? deltaBarX : deltaX));
3672-
for (; i < j && i + 1 < labels.length; i++)
3673-
labels[i + 1] = false;
3674-
}
3653+
startlabe = labx;
3654+
endlabe = labx + labe.getBBox().width + (axis.x.props.labelsMargin ? axis.x.props.labelsMargin : 0) + (axis.x.props.labelsMarginRight ? axis.x.props.labelsMarginRight : 0);
3655+
} else {
3656+
// Manages labelsHideCovered with labelsAnchor = 'middle' (default)
3657+
var deltalabe = (labe.getBBox().width + (axis.x.props.labelsMargin ? axis.x.props.labelsMargin : 0) + (axis.x.props.labelsMarginRight ? axis.x.props.labelsMarginRight : 0)) / 2;
3658+
startlabe = labx - deltalabe;
3659+
endlabe = labx + deltalabe;
3660+
}
3661+
3662+
//console.warn(txt, labx, startlabe, endlabe, labe.getBBox().width, hideLabelsUntilX);
3663+
3664+
if (axis.x.props.labelsRotate) {
3665+
// Rotazione label (disable labelsHideCovered)
3666+
labe.attr({"text-anchor" : axis.x.props.labelsRotate > 0 ? "start" : "end"}).rotate(axis.x.props.labelsRotate, labx, laby).toBack();
3667+
startlabe = -9999;
3668+
endlabe = -9999;
36753669
}
3670+
3671+
// Manage label overflow
3672+
if (startlabe > -9999 && props.nx == 'auto') {
3673+
if (endlabe > opt.width)
3674+
// Il label has overflow on the right => delete it (if nx = auto)
3675+
labels[i] = false;
3676+
else if (startlabe < 0)
3677+
// Il label has overflow on the left => delete it (if nx = auto and labelsAnchor != start)
3678+
labels[i] = false;
3679+
}
3680+
3681+
// Manage labelsHideCovered
3682+
if (labels[i] != false && axis.x.props.labelsHideCovered && endlabe > 0) {
3683+
if (hideLabelsUntilX == 0 || startlabe > hideLabelsUntilX)
3684+
hideLabelsUntilX = endlabe;
3685+
else
3686+
labels[i] = false;
3687+
}
3688+
if (labels[i] == false)
3689+
labe.hide();
3690+
36763691
paths.push({ path : [ [ 'RELEMENT', labe ] ], attr : false });
36773692
}
36783693
}

‎dist/elycharts.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/changelog_en.txt

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ v2.1.3
2020
- fix for tooltip color/frameProps settings where specified with shortcut "serie.color"
2121
- line chart: fixed line chart not rounded
2222
- legend: fixed a lot (was broken in almost all configurations...)
23+
- line chart: changed the way labels are drawn and spaced on x axis (fix for labelsHideCovered)
2324

2425
v2.1.2
2526
- support for series.empty.tooltip e series.empty.label

‎src/elycharts_chart_line.js

+42-27
Original file line numberDiff line numberDiff line change
@@ -307,49 +307,64 @@ $.elycharts.line = {
307307
var labelsCenter = props.labelsCenter;
308308
if (labelsCenter == 'auto')
309309
labelsCenter = (env.indexCenter == 'bar');
310+
var hideLabelsUntilX = 0; // Used for labelsHideCovered
310311

311312
if (axis.x && axis.x.props.labels)
312313
for (i = 0; i < labels.length; i++)
313314
if (labels[i]) {
315+
314316
if (axis.x.props.labelsSkip && i < axis.x.props.labelsSkip)
315317
labels[i] = false;
316318
else if (typeof labels[i] != 'boolean' || labels[i]) {
317319
val = labels[i];
318320
if (axis.x.props.labelsFormatHandler)
319321
val = axis.x.props.labelsFormatHandler(val);
320322
txt = (axis.x.props.prefix ? axis.x.props.prefix : "") + labels[i] + (axis.x.props.suffix ? axis.x.props.suffix : "");
321-
labx = (labelsCenter && axis.x.props.labelsAnchor != "start" ? Math.round(deltaBarX / 2) : 0) + opt.margins[3] + i * (labelsCenter ? deltaBarX : deltaX) + (axis.x.props.labelsMargin ? axis.x.props.labelsMargin : 0);
323+
labx = opt.margins[3] + i * (labelsCenter ? deltaBarX : deltaX) + (axis.x.props.labelsMargin ? axis.x.props.labelsMargin : 0);
322324
laby = opt.height - opt.margins[2] + axis.x.props.labelsDistance;
323325
labe = paper.text(labx, laby, txt).attr(axis.x.props.labelsProps).toBack();
324-
if (axis.x.props.labelsRotate)
325-
// Rotazione label
326-
labe.attr({"text-anchor" : axis.x.props.labelsRotate > 0 ? "start" : "end"}).rotate(axis.x.props.labelsRotate, labx, laby).toBack();
327-
else if (props.nx == 'auto' && labx + labe.getBBox().width / (axis.x.props.labelsAnchor && axis.x.props.labelsAnchor == "start" ? 1 : 2) > opt.width) {
328-
// Il label has overflow on the right => delete it (if nx = auto)
329-
labe.hide();
330-
labels[i] = false;
331-
} else if (props.nx == 'auto' && (!axis.x.props.labelsAnchor || axis.x.props.labelsAnchor != "start") && labx - labe.getBBox().width / 2 < 0) {
332-
// Il label has overflow on the left => delete it (if nx = auto and labelsAnchor != start)
333-
labe.hide();
334-
labels[i] = false;
335-
} else if (axis.x.props.labelsAnchor && axis.x.props.labelsAnchor == "start") {
326+
var startlabe, endlabe; // Used for labelsHideCovered
327+
if (axis.x.props.labelsAnchor && axis.x.props.labelsAnchor == "start") {
336328
// label not rotated buth with a labelsAnchor
337329
labe.attr({"text-anchor" : "start"});
338-
lw = labe.getBBox().width + (axis.x.props.labelsMargin ? axis.x.props.labelsMargin : 0) + (axis.x.props.labelsMarginRight ? axis.x.props.labelsMarginRight : 0) - (labelsCenter ? deltaBarX : deltaX);
339-
if (axis.x.props.labelsHideCovered && lw > 0) {
340-
j = i + Math.ceil(lw / (labelsCenter ? deltaBarX : deltaX));
341-
for (; i < j && i + 1 < labels.length; i++)
342-
labels[i + 1] = false;
343-
}
344-
} else if (axis.x.props.labelsHideCovered) {
345-
// Manages labelsHideCovered with labelsAnchor != 'start'
346-
lw = (labe.getBBox().width + (axis.x.props.labelsMargin ? axis.x.props.labelsMargin : 0) + (axis.x.props.labelsMarginRight ? axis.x.props.labelsMarginRight : 0)) / 1 - (labelsCenter ? deltaBarX : deltaX);
347-
if (lw > 0) {
348-
j = i + Math.ceil(lw / (labelsCenter ? deltaBarX : deltaX));
349-
for (; i < j && i + 1 < labels.length; i++)
350-
labels[i + 1] = false;
351-
}
330+
startlabe = labx;
331+
endlabe = labx + labe.getBBox().width + (axis.x.props.labelsMargin ? axis.x.props.labelsMargin : 0) + (axis.x.props.labelsMarginRight ? axis.x.props.labelsMarginRight : 0);
332+
} else {
333+
// Manages labelsHideCovered with labelsAnchor = 'middle' (default)
334+
var deltalabe = (labe.getBBox().width + (axis.x.props.labelsMargin ? axis.x.props.labelsMargin : 0) + (axis.x.props.labelsMarginRight ? axis.x.props.labelsMarginRight : 0)) / 2;
335+
startlabe = labx - deltalabe;
336+
endlabe = labx + deltalabe;
352337
}
338+
339+
//console.warn(txt, labx, startlabe, endlabe, labe.getBBox().width, hideLabelsUntilX);
340+
341+
if (axis.x.props.labelsRotate) {
342+
// Rotazione label (disable labelsHideCovered)
343+
labe.attr({"text-anchor" : axis.x.props.labelsRotate > 0 ? "start" : "end"}).rotate(axis.x.props.labelsRotate, labx, laby).toBack();
344+
startlabe = -9999;
345+
endlabe = -9999;
346+
}
347+
348+
// Manage label overflow
349+
if (startlabe > -9999 && props.nx == 'auto') {
350+
if (endlabe > opt.width)
351+
// Il label has overflow on the right => delete it (if nx = auto)
352+
labels[i] = false;
353+
else if (startlabe < 0)
354+
// Il label has overflow on the left => delete it (if nx = auto and labelsAnchor != start)
355+
labels[i] = false;
356+
}
357+
358+
// Manage labelsHideCovered
359+
if (labels[i] != false && axis.x.props.labelsHideCovered && endlabe > 0) {
360+
if (hideLabelsUntilX == 0 || startlabe > hideLabelsUntilX)
361+
hideLabelsUntilX = endlabe;
362+
else
363+
labels[i] = false;
364+
}
365+
if (labels[i] == false)
366+
labe.hide();
367+
353368
paths.push({ path : [ [ 'RELEMENT', labe ] ], attr : false });
354369
}
355370
}

0 commit comments

Comments
 (0)