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

Fix the legend drawing when labels.usePointStyle is true (#3323)

Browse Source
This commit is contained in:
Evert Timberg
2016-09-24 04:57:33 -04:00
committed by Simon Brunel
parent edc22cad72
commit 9015e72ae1
1 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/core/core.legend.js
View File

@@ -64,6 +64,18 @@ module.exports = function(Chart) {
}
};
/**
* Helper function to get the box width based on the usePointStyle option
* @param labelopts {Object} the label options on the legend
* @param fontSize {Number} the label font size
* @return {Number} width of the color box area
*/
function getBoxWidth(labelOpts, fontSize) {
return labelOpts.usePointStyle ?
fontSize * Math.SQRT2 :
labelOpts.boxWidth;
}
Chart.Legend = Chart.Element.extend({
initialize: function(config) {
@@ -204,11 +216,9 @@ module.exports = function(Chart) {
ctx.textBaseline = 'top';
helpers.each(me.legendItems, function(legendItem, i) {
var boxWidth = labelOpts.usePointStyle ?
fontSize * Math.sqrt(2) :
labelOpts.boxWidth;
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;
@@ -236,10 +246,7 @@ module.exports = function(Chart) {
var itemHeight = fontSize + vPadding;
helpers.each(me.legendItems, function(legendItem, i) {
// If usePointStyle is set, multiple boxWidth by 2 since it represents
// the radius and not truly the width
var boxWidth = labelOpts.usePointStyle ? 2 * labelOpts.boxWidth : labelOpts.boxWidth;
var boxWidth = getBoxWidth(labelOpts, fontSize);
var itemWidth = boxWidth + (fontSize / 2) + ctx.measureText(legendItem.text).width;
// If too tall, go to new column
@@ -308,7 +315,7 @@ module.exports = function(Chart) {
ctx.fillStyle = fontColor; // render in correct colour
ctx.font = labelFont;
var boxWidth = labelOpts.boxWidth,
var boxWidth = getBoxWidth(labelOpts, fontSize),
hitboxes = me.legendHitBoxes;
// current position
@@ -385,9 +392,7 @@ module.exports = function(Chart) {
var itemHeight = fontSize + labelOpts.padding;
helpers.each(me.legendItems, function(legendItem, i) {
var textWidth = ctx.measureText(legendItem.text).width,
width = labelOpts.usePointStyle ?
fontSize + (fontSize / 2) + textWidth :
boxWidth + (fontSize / 2) + textWidth,
width = boxWidth + (fontSize / 2) + textWidth,
x = cursor.x,
y = cursor.y;