Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-03-06 08:24:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix legend item layout issue (#5816)

Browse Source
This commit is contained in:
Akihiko Kusanagi
2018-11-12 15:57:16 +08:00
committed by Simon Brunel
parent 9140ef7e67
commit e730f87e15
2 changed files with 153 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/plugins/plugin.legend.js
View File

@@ -241,7 +241,7 @@ var Legend = Element.extend({
// Width of each line of legend boxes. Labels wrap onto multiple lines when there are too many to fit on one
var lineWidths = me.lineWidths = [0];
var totalHeight = me.legendItems.length ? fontSize + (labelOpts.padding) : 0;
var totalHeight = 0;
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
@@ -250,9 +250,9 @@ var Legend = Element.extend({
var boxWidth = getBoxWidth(labelOpts, fontSize);
var width = boxWidth + (fontSize / 2) + ctx.measureText(legendItem.text).width;
if (lineWidths[lineWidths.length - 1] + width + labelOpts.padding >= me.width) {
totalHeight += fontSize + (labelOpts.padding);
lineWidths[lineWidths.length] = me.left;
if (i === 0 || lineWidths[lineWidths.length - 1] + width + labelOpts.padding > minSize.width) {
totalHeight += fontSize + labelOpts.padding;
lineWidths[lineWidths.length - (i > 0 ? 0 : 1)] = labelOpts.padding;
}
// Store the hitbox width and height here. Final position will be updated in `draw`
@@ -281,7 +281,7 @@ var Legend = Element.extend({
var itemWidth = boxWidth + (fontSize / 2) + ctx.measureText(legendItem.text).width;
// If too tall, go to new column
if (currentColHeight + itemHeight > minSize.height) {
if (i > 0 && currentColHeight + itemHeight > minSize.height - vPadding) {
totalWidth += currentColWidth + labelOpts.padding;
columnWidths.push(currentColWidth); // previous column width
@@ -412,7 +412,7 @@ var Legend = Element.extend({
var isHorizontal = me.isHorizontal();
if (isHorizontal) {
cursor = {
x: me.left + ((legendWidth - lineWidths[0]) / 2),
x: me.left + ((legendWidth - lineWidths[0]) / 2) + labelOpts.padding,
y: me.top + labelOpts.padding,
line: 0
};
@@ -431,13 +431,16 @@ var Legend = Element.extend({
var x = cursor.x;
var y = cursor.y;
// Use (me.left + me.minSize.width) and (me.top + me.minSize.height)
// instead of me.right and me.bottom because me.width and me.height
// may have been changed since me.minSize was calculated
if (isHorizontal) {
if (x + width >= legendWidth) {
if (i > 0 && x + width + labelOpts.padding > me.left + me.minSize.width) {
y = cursor.y += itemHeight;
cursor.line++;
x = cursor.x = me.left + ((legendWidth - lineWidths[cursor.line]) / 2);
x = cursor.x = me.left + ((legendWidth - lineWidths[cursor.line]) / 2) + labelOpts.padding;
}
} else if (y + itemHeight > me.bottom) {
} else if (i > 0 && y + itemHeight > me.top + me.minSize.height) {
x = cursor.x = x + me.columnWidths[cursor.line] + labelOpts.padding;
y = cursor.y = me.top + labelOpts.padding;
cursor.line++;
@@ -452,7 +455,7 @@ var Legend = Element.extend({
fillText(x, y, legendItem, textWidth);
if (isHorizontal) {
cursor.x += width + (labelOpts.padding);
cursor.x += width + labelOpts.padding;
} else {
cursor.y += itemHeight;
}