archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Fix global font settings

Browse Source
This commit is contained in:
Evert Timberg 2016-02-28 13:41:17 -05:00
parent 431f930c15
commit 8d5b3809f6
15 changed files with 151 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,10 +22,6 @@ module.exports = function(Chart) {
labels: {
boxWidth: 40,
fontSize: Chart.defaults.global.defaultFontSize,
fontStyle: Chart.defaults.global.defaultFontStyle,
fontColor: Chart.defaults.global.defaultFontColor,
fontFamily: Chart.defaults.global.defaultFontFamily,
padding: 10,
// Generates labels shown in the legend
// Valid properties to return:
@ -156,7 +152,10 @@ module.exports = function(Chart) {
fit: function() {
var ctx = this.ctx;
var labelFont = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily);
var fontSize = helpers.getValueOrDefault(this.options.labels.fontSize, Chart.defaults.global.defaultFontSize);
var fontStyle = helpers.getValueOrDefault(this.options.labels.fontStyle, Chart.defaults.global.defaultFontStyle);
var fontFamily = helpers.getValueOrDefault(this.options.labels.fontFamily, Chart.defaults.global.defaultFontFamily);
var labelFont = helpers.fontString(fontSize, fontStyle, fontFamily);
// Reset hit boxes
this.legendHitBoxes = [];
@ -182,16 +181,16 @@ module.exports = function(Chart) {
// Width of each line of legend boxes. Labels wrap onto multiple lines when there are too many to fit on one
this.lineWidths = [0];
var totalHeight = this.legendItems.length ? this.options.labels.fontSize + (this.options.labels.padding) : 0;
var totalHeight = this.legendItems.length ? fontSize + (this.options.labels.padding) : 0;
ctx.textAlign = "left";
ctx.textBaseline = 'top';
ctx.font = labelFont;
helpers.each(this.legendItems, function(legendItem, i) {
var width = this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + ctx.measureText(legendItem.text).width;
var width = this.options.labels.boxWidth + (fontSize / 2) + ctx.measureText(legendItem.text).width;
if (this.lineWidths[this.lineWidths.length - 1] + width + this.options.labels.padding >= this.width) {
totalHeight += this.options.labels.fontSize + (this.options.labels.padding);
totalHeight += fontSize + (this.options.labels.padding);
this.lineWidths[this.lineWidths.length] = this.left;
}
@ -200,7 +199,7 @@ module.exports = function(Chart) {
left: 0,
top: 0,
width: width,
height: this.options.labels.fontSize
height: fontSize
};
this.lineWidths[this.lineWidths.length - 1] += width + this.options.labels.padding;
@ -234,7 +233,11 @@ module.exports = function(Chart) {
line: 0
};
var labelFont = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily);
var fontColor = helpers.getValueOrDefault(this.options.labels.fontColor, Chart.defaults.global.defaultFontColor);
var fontSize = helpers.getValueOrDefault(this.options.labels.fontSize, Chart.defaults.global.defaultFontSize);
var fontStyle = helpers.getValueOrDefault(this.options.labels.fontStyle, Chart.defaults.global.defaultFontStyle);
var fontFamily = helpers.getValueOrDefault(this.options.labels.fontFamily, Chart.defaults.global.defaultFontFamily);
var labelFont = helpers.fontString(fontSize, fontStyle, fontFamily);
// Horizontal
if (this.isHorizontal()) {
@ -242,16 +245,16 @@ module.exports = function(Chart) {
ctx.textAlign = "left";
ctx.textBaseline = 'top';
ctx.lineWidth = 0.5;
ctx.strokeStyle = this.options.labels.fontColor; // for strikethrough effect
ctx.fillStyle = this.options.labels.fontColor; // render in correct colour
ctx.strokeStyle = fontColor; // for strikethrough effect
ctx.fillStyle = fontColor; // render in correct colour
ctx.font = labelFont;
helpers.each(this.legendItems, function(legendItem, i) {
var textWidth = ctx.measureText(legendItem.text).width;
var width = this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + textWidth;
var width = this.options.labels.boxWidth + (fontSize / 2) + textWidth;
if (cursor.x + width >= this.width) {
cursor.y += this.options.labels.fontSize + (this.options.labels.padding);
cursor.y += fontSize + (this.options.labels.padding);
cursor.line++;
cursor.x = this.left + ((this.width - this.lineWidths[cursor.line]) / 2);
}
@ -276,8 +279,8 @@ module.exports = function(Chart) {
}
// Draw the box
ctx.strokeRect(cursor.x, cursor.y, this.options.labels.boxWidth, this.options.labels.fontSize);
ctx.fillRect(cursor.x, cursor.y, this.options.labels.boxWidth, this.options.labels.fontSize);
ctx.strokeRect(cursor.x, cursor.y, this.options.labels.boxWidth, fontSize);
ctx.fillRect(cursor.x, cursor.y, this.options.labels.boxWidth, fontSize);
ctx.restore();
@ -285,14 +288,14 @@ module.exports = function(Chart) {
this.legendHitBoxes[i].top = cursor.y;
// Fill the actual label
ctx.fillText(legendItem.text, this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + cursor.x, cursor.y);
ctx.fillText(legendItem.text, this.options.labels.boxWidth + (fontSize / 2) + cursor.x, cursor.y);
if (legendItem.hidden) {
// Strikethrough the text if hidden
ctx.beginPath();
ctx.lineWidth = 2;
ctx.moveTo(this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + cursor.x, cursor.y + (this.options.labels.fontSize / 2));
ctx.lineTo(this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + cursor.x + textWidth, cursor.y + (this.options.labels.fontSize / 2));
ctx.moveTo(this.options.labels.boxWidth + (fontSize / 2) + cursor.x, cursor.y + (fontSize / 2));
ctx.lineTo(this.options.labels.boxWidth + (fontSize / 2) + cursor.x + textWidth, cursor.y + (fontSize / 2));
ctx.stroke();
}

90
src/core/core.scale.js
View File

@ -21,11 +21,6 @@ module.exports = function(Chart) {
// scale label
scaleLabel: {
fontColor: Chart.defaults.global.defaultFontColor,
fontFamily: Chart.defaults.global.defaultFontFamily,
fontSize: Chart.defaults.global.defaultFontSize,
fontStyle: Chart.defaults.global.defaultFontStyle,
// actual label
labelString: '',
@ -36,10 +31,6 @@ module.exports = function(Chart) {
// label settings
ticks: {
beginAtZero: false,
fontSize: Chart.defaults.global.defaultFontSize,
fontStyle: Chart.defaults.global.defaultFontStyle,
fontColor: Chart.defaults.global.defaultFontColor,
fontFamily: Chart.defaults.global.defaultFontFamily,
maxRotation: 90,
mirror: false,
padding: 10,
@ -187,8 +178,11 @@ module.exports = function(Chart) {
calculateTickRotation: function() {
//Get the width of each grid by calculating the difference
//between x offsets between 0 and 1.
var labelFont = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily);
this.ctx.font = labelFont;
var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle);
var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily);
var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
this.ctx.font = tickLabelFont;
var firstWidth = this.ctx.measureText(this.ticks[0]).width;
var lastWidth = this.ctx.measureText(this.ticks[this.ticks.length - 1]).width;
@ -206,7 +200,7 @@ module.exports = function(Chart) {
if (!this.longestTextCache) {
this.longestTextCache = {};
}
var originalLabelWidth = helpers.longestText(this.ctx, labelFont, this.ticks, this.longestTextCache);
var originalLabelWidth = helpers.longestText(this.ctx, tickLabelFont, this.ticks, this.longestTextCache);
var labelWidth = originalLabelWidth;
var cosRotation;
var sinRotation;
@ -223,11 +217,11 @@ module.exports = function(Chart) {
firstRotated = cosRotation * firstWidth;
// We're right aligning the text now.
if (firstRotated + this.options.ticks.fontSize / 2 > this.yLabelWidth) {
this.paddingLeft = firstRotated + this.options.ticks.fontSize / 2;
if (firstRotated + tickFontSize / 2 > this.yLabelWidth) {
this.paddingLeft = firstRotated + tickFontSize / 2;
}
this.paddingRight = this.options.ticks.fontSize / 2;
this.paddingRight = tickFontSize / 2;
if (sinRotation * originalLabelWidth > this.maxHeight) {
// go back one step
@ -262,6 +256,16 @@ module.exports = function(Chart) {
height: 0
};
var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle);
var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily);
var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
var scaleLabelFontSize = helpers.getValueOrDefault(this.options.scaleLabel.fontSize, Chart.defaults.global.defaultFontSize);
var scaleLabelFontStyle = helpers.getValueOrDefault(this.options.scaleLabel.fontStyle, Chart.defaults.global.defaultFontStyle);
var scaleLabelFontFamily = helpers.getValueOrDefault(this.options.scaleLabel.fontFamily, Chart.defaults.global.defaultFontFamily);
var scaleLabelFont = helpers.fontString(scaleLabelFontSize, scaleLabelFontStyle, scaleLabelFontFamily);
// Width
if (this.isHorizontal()) {
// subtract the margins to line up with the chartArea if we are a full width scale
@ -280,34 +284,29 @@ module.exports = function(Chart) {
// Are we showing a title for the scale?
if (this.options.scaleLabel.display) {
if (this.isHorizontal()) {
this.minSize.height += (this.options.scaleLabel.fontSize * 1.5);
this.minSize.height += (scaleLabelFontSize * 1.5);
} else {
this.minSize.width += (this.options.scaleLabel.fontSize * 1.5);
this.minSize.width += (scaleLabelFontSize * 1.5);
}
}
if (this.options.ticks.display && this.options.display) {
// Don't bother fitting the ticks if we are not showing them
var labelFont = helpers.fontString(this.options.ticks.fontSize,
this.options.ticks.fontStyle, this.options.ticks.fontFamily);
if (!this.longestTextCache) {
this.longestTextCache = {};
}
var largestTextWidth = helpers.longestText(this.ctx, labelFont, this.ticks, this.longestTextCache);
var largestTextWidth = helpers.longestText(this.ctx, tickLabelFont, this.ticks, this.longestTextCache);
if (this.isHorizontal()) {
// A horizontal axis is more constrained by the height.
this.longestLabelWidth = largestTextWidth;
// TODO - improve this calculation
var labelHeight = (Math.sin(helpers.toRadians(this.labelRotation)) * this.longestLabelWidth) + 1.5 * this.options.ticks.fontSize;
var labelHeight = (Math.sin(helpers.toRadians(this.labelRotation)) * this.longestLabelWidth) + 1.5 * tickFontSize;
this.minSize.height = Math.min(this.maxHeight, this.minSize.height + labelHeight);
labelFont = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily);
this.ctx.font = labelFont;
this.ctx.font = tickLabelFont;
var firstLabelWidth = this.ctx.measureText(this.ticks[0]).width;
var lastLabelWidth = this.ctx.measureText(this.ticks[this.ticks.length - 1]).width;
@ -317,7 +316,7 @@ module.exports = function(Chart) {
var cosRotation = Math.cos(helpers.toRadians(this.labelRotation));
var sinRotation = Math.sin(helpers.toRadians(this.labelRotation));
this.paddingLeft = this.labelRotation !== 0 ? (cosRotation * firstLabelWidth) + 3 : firstLabelWidth / 2 + 3; // add 3 px to move away from canvas edges
this.paddingRight = this.labelRotation !== 0 ? (sinRotation * (this.options.ticks.fontSize / 2)) + 3 : lastLabelWidth / 2 + 3; // when rotated
this.paddingRight = this.labelRotation !== 0 ? (sinRotation * (tickFontSize / 2)) + 3 : lastLabelWidth / 2 + 3; // when rotated
} else {
// A vertical axis is more constrained by the width. Labels are the dominant factor here, so get that length first
var maxLabelWidth = this.maxWidth - this.minSize.width;
@ -335,8 +334,8 @@ module.exports = function(Chart) {
this.minSize.width = this.maxWidth;
}
this.paddingTop = this.options.ticks.fontSize / 2;
this.paddingBottom = this.options.ticks.fontSize / 2;
this.paddingTop = tickFontSize / 2;
this.paddingBottom = tickFontSize / 2;
}
}
@ -447,14 +446,25 @@ module.exports = function(Chart) {
maxTicks = this.options.ticks.maxTicksLimit;
}
// Make sure we draw text in the correct color and font
this.ctx.fillStyle = this.options.ticks.fontColor;
var labelFont = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily);
var tickFontColor = helpers.getValueOrDefault(this.options.ticks.fontColor, Chart.defaults.global.defaultFontColor);
var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle);
var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily);
var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
var scaleLabelFontColor = helpers.getValueOrDefault(this.options.scaleLabel.fontColor, Chart.defaults.global.defaultFontColor);
var scaleLabelFontSize = helpers.getValueOrDefault(this.options.scaleLabel.fontSize, Chart.defaults.global.defaultFontSize);
var scaleLabelFontStyle = helpers.getValueOrDefault(this.options.scaleLabel.fontStyle, Chart.defaults.global.defaultFontStyle);
var scaleLabelFontFamily = helpers.getValueOrDefault(this.options.scaleLabel.fontFamily, Chart.defaults.global.defaultFontFamily);
var scaleLabelFont = helpers.fontString(scaleLabelFontSize, scaleLabelFontStyle, scaleLabelFontFamily);
var cosRotation = Math.cos(helpers.toRadians(this.labelRotation));
var sinRotation = Math.sin(helpers.toRadians(this.labelRotation));
var longestRotatedLabel = this.longestLabelWidth * cosRotation;
var rotatedLabelHeight = this.options.ticks.fontSize * sinRotation;
var rotatedLabelHeight = tickFontSize * sinRotation;
// Make sure we draw text in the correct color and font
this.ctx.fillStyle = tickFontColor;
if (this.isHorizontal()) {
setContextLineSettings = true;
@ -529,7 +539,7 @@ module.exports = function(Chart) {
this.ctx.save();
this.ctx.translate(xLabelValue, (isRotated) ? this.top + 12 : this.options.position === "top" ? this.bottom - 10 : this.top + 10);
this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1);
this.ctx.font = labelFont;
this.ctx.font = tickLabelFont;
this.ctx.textAlign = (isRotated) ? "right" : "center";
this.ctx.textBaseline = (isRotated) ? "middle" : this.options.position === "top" ? "bottom" : "top";
this.ctx.fillText(label, 0, 0);
@ -541,11 +551,11 @@ module.exports = function(Chart) {
// Draw the scale label
this.ctx.textAlign = "center";
this.ctx.textBaseline = 'middle';
this.ctx.fillStyle = this.options.scaleLabel.fontColor; // render in correct colour
this.ctx.font = helpers.fontString(this.options.scaleLabel.fontSize, this.options.scaleLabel.fontStyle, this.options.scaleLabel.fontFamily);
this.ctx.fillStyle = scaleLabelFontColor; // render in correct colour
this.ctx.font = scaleLabelFont;
scaleLabelX = this.left + ((this.right - this.left) / 2); // midpoint of the width
scaleLabelY = this.options.position === 'bottom' ? this.bottom - (this.options.scaleLabel.fontSize / 2) : this.top + (this.options.scaleLabel.fontSize / 2);
scaleLabelY = this.options.position === 'bottom' ? this.bottom - (scaleLabelFontSize / 2) : this.top + (scaleLabelFontSize / 2);
this.ctx.fillText(this.options.scaleLabel.labelString, scaleLabelX, scaleLabelY);
}
@ -622,7 +632,7 @@ module.exports = function(Chart) {
this.ctx.translate(xLabelValue, yLabelValue);
this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1);
this.ctx.font = labelFont;
this.ctx.font = tickLabelFont;
this.ctx.textBaseline = "middle";
this.ctx.fillText(label, 0, 0);
this.ctx.restore();
@ -631,7 +641,7 @@ module.exports = function(Chart) {
if (this.options.scaleLabel.display) {
// Draw the scale label
scaleLabelX = this.options.position === 'left' ? this.left + (this.options.scaleLabel.fontSize / 2) : this.right - (this.options.scaleLabel.fontSize / 2);
scaleLabelX = this.options.position === 'left' ? this.left + (scaleLabelFontSize / 2) : this.right - (scaleLabelFontSize / 2);
scaleLabelY = this.top + ((this.bottom - this.top) / 2);
var rotation = this.options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI;
@ -639,8 +649,8 @@ module.exports = function(Chart) {
this.ctx.translate(scaleLabelX, scaleLabelY);
this.ctx.rotate(rotation);
this.ctx.textAlign = "center";
this.ctx.fillStyle = this.options.scaleLabel.fontColor; // render in correct colour
this.ctx.font = helpers.fontString(this.options.scaleLabel.fontSize, this.options.scaleLabel.fontStyle, this.options.scaleLabel.fontFamily);
this.ctx.fillStyle =scaleLabelFontColor; // render in correct colour
this.ctx.font = scaleLabelFont;
this.ctx.textBaseline = 'middle';
this.ctx.fillText(this.options.scaleLabel.labelString, 0, 0);
this.ctx.restore();

62
src/core/core.title.js
View File

@ -9,9 +9,6 @@ module.exports = function(Chart) {
position: 'top',
fullWidth: true, // marks that this box should take the full width of the canvas (pushing down other boxes)
fontColor: Chart.defaults.global.defaultFontColor,
fontFamily: Chart.defaults.global.defaultFontFamily,
fontSize: Chart.defaults.global.defaultFontSize,
fontStyle: 'bold',
padding: 10,
@ -107,7 +104,10 @@ module.exports = function(Chart) {
fit: function() {
var ctx = this.ctx;
var titleFont = helpers.fontString(this.options.fontSize, this.options.fontStyle, this.options.fontFamily);
var fontSize = helpers.getValueOrDefault(this.options.fontSize, Chart.defaults.global.defaultFontSize);
var fontStyle = helpers.getValueOrDefault(this.options.fontStyle, Chart.defaults.global.defaultFontStyle);
var fontFamily = helpers.getValueOrDefault(this.options.fontFamily, Chart.defaults.global.defaultFontFamily);
var titleFont = helpers.fontString(fontSize, fontStyle, fontFamily);
// Width
if (this.isHorizontal()) {
@ -128,11 +128,11 @@ module.exports = function(Chart) {
// Title
if (this.options.display) {
this.minSize.height += this.options.fontSize + (this.options.padding * 2);
this.minSize.height += fontSize + (this.options.padding * 2);
}
} else {
if (this.options.display) {
this.minSize.width += this.options.fontSize + (this.options.padding * 2);
this.minSize.width += fontSize + (this.options.padding * 2);
}
}
@ -153,41 +153,39 @@ module.exports = function(Chart) {
var ctx = this.ctx;
var titleX, titleY;
var fontColor = helpers.getValueOrDefault(this.options.fontColor, Chart.defaults.global.defaultFontColor);
var fontSize = helpers.getValueOrDefault(this.options.fontSize, Chart.defaults.global.defaultFontSize);
var fontStyle = helpers.getValueOrDefault(this.options.fontStyle, Chart.defaults.global.defaultFontStyle);
var fontFamily = helpers.getValueOrDefault(this.options.fontFamily, Chart.defaults.global.defaultFontFamily);
var titleFont = helpers.fontString(fontSize, fontStyle, fontFamily);
ctx.fillStyle = fontColor; // render in correct colour
ctx.font = titleFont;
// Horizontal
if (this.isHorizontal()) {
// Title
if (this.options.display) {
ctx.textAlign = "center";
ctx.textBaseline = 'middle';
ctx.textAlign = "center";
ctx.textBaseline = 'middle';
ctx.fillStyle = this.options.fontColor; // render in correct colour
ctx.font = helpers.fontString(this.options.fontSize, this.options.fontStyle, this.options.fontFamily);
titleX = this.left + ((this.right - this.left) / 2); // midpoint of the width
titleY = this.top + ((this.bottom - this.top) / 2); // midpoint of the height
titleX = this.left + ((this.right - this.left) / 2); // midpoint of the width
titleY = this.top + ((this.bottom - this.top) / 2); // midpoint of the height
ctx.fillText(this.options.text, titleX, titleY);
}
ctx.fillText(this.options.text, titleX, titleY);
} else {
// Title
if (this.options.display) {
titleX = this.options.position === 'left' ? this.left + (this.options.fontSize / 2) : this.right - (this.options.fontSize / 2);
titleY = this.top + ((this.bottom - this.top) / 2);
var rotation = this.options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI;
ctx.save();
ctx.translate(titleX, titleY);
ctx.rotate(rotation);
ctx.textAlign = "center";
ctx.fillStyle = this.options.fontColor; // render in correct colour
ctx.font = helpers.fontString(this.options.fontSize, this.options.fontStyle, this.options.fontFamily);
ctx.textBaseline = 'middle';
ctx.fillText(this.options.text, 0, 0);
ctx.restore();
}
titleX = this.options.position === 'left' ? this.left + (fontSize / 2) : this.right - (fontSize / 2);
titleY = this.top + ((this.bottom - this.top) / 2);
var rotation = this.options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI;
ctx.save();
ctx.translate(titleX, titleY);
ctx.rotate(rotation);
ctx.textAlign = "center";
ctx.textBaseline = 'middle';
ctx.fillText(this.options.text, 0, 0);
ctx.restore();
}
}
}

25
src/core/core.tooltip.js
View File

@ -9,21 +9,14 @@ module.exports = function(Chart) {
custom: null,
mode: 'single',
backgroundColor: "rgba(0,0,0,0.8)",
titleFontFamily: Chart.defaults.global.defaultFontFamily,
titleFontSize: Chart.defaults.global.defaultFontSize,
titleFontStyle: "bold",
titleSpacing: 2,
titleMarginBottom: 6,
titleColor: "#fff",
titleAlign: "left",
bodyFontFamily: Chart.defaults.global.defaultFontFamily,
bodyFontSize: Chart.defaults.global.defaultFontSize,
bodyFontStyle: Chart.defaults.global.defaultFontStyle,
bodySpacing: 2,
bodyColor: "#fff",
bodyAlign: "left",
footerFontFamily: Chart.defaults.global.defaultFontFamily,
footerFontSize: Chart.defaults.global.defaultFontSize,
footerFontStyle: "bold",
footerSpacing: 2,
footerMarginTop: 6,
@ -98,26 +91,26 @@ module.exports = function(Chart) {
// Body
bodyColor: options.tooltips.bodyColor,
_bodyFontFamily: options.tooltips.bodyFontFamily,
_bodyFontStyle: options.tooltips.bodyFontStyle,
_bodyFontFamily: helpers.getValueOrDefault(options.tooltips.bodyFontFamily, Chart.defaults.global.defaultFontFamily),
_bodyFontStyle: helpers.getValueOrDefault(options.tooltips.bodyFontStyle, Chart.defaults.global.defaultFontStyle),
_bodyAlign: options.tooltips.bodyAlign,
bodyFontSize: options.tooltips.bodyFontSize,
bodyFontSize: helpers.getValueOrDefault(options.tooltips.bodyFontSize, Chart.defaults.global.defaultFontSize),
bodySpacing: options.tooltips.bodySpacing,
// Title
titleColor: options.tooltips.titleColor,
_titleFontFamily: options.tooltips.titleFontFamily,
_titleFontStyle: options.tooltips.titleFontStyle,
titleFontSize: options.tooltips.titleFontSize,
_titleFontFamily: helpers.getValueOrDefault(options.tooltips.titleFontFamily, Chart.defaults.global.defaultFontFamily),
_titleFontStyle: helpers.getValueOrDefault(options.tooltips.titleFontStyle, Chart.defaults.global.defaultFontStyle),
titleFontSize: helpers.getValueOrDefault(options.tooltips.titleFontSize, Chart.defaults.global.defaultFontSize),
_titleAlign: options.tooltips.titleAlign,
titleSpacing: options.tooltips.titleSpacing,
titleMarginBottom: options.tooltips.titleMarginBottom,
// Footer
footerColor: options.tooltips.footerColor,
_footerFontFamily: options.tooltips.footerFontFamily,
_footerFontStyle: options.tooltips.footerFontStyle,
footerFontSize: options.tooltips.footerFontSize,
_footerFontFamily: helpers.getValueOrDefault(options.tooltips.footerFontFamily, Chart.defaults.global.defaultFontFamily),
_footerFontStyle: helpers.getValueOrDefault(options.tooltips.footerFontStyle, Chart.defaults.global.defaultFontStyle),
footerFontSize: helpers.getValueOrDefault(options.tooltips.footerFontSize, Chart.defaults.global.defaultFontSize),
_footerAlign: options.tooltips.footerAlign,
footerSpacing: options.tooltips.footerSpacing,
footerMarginTop: options.tooltips.footerMarginTop,

7
src/scales/scale.linear.js
View File

@ -162,12 +162,11 @@ module.exports = function(Chart) {
var maxTicks;
if (this.isHorizontal()) {
maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11,
Math.ceil(this.width / 50));
maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11, Math.ceil(this.width / 50));
} else {
// The factor of 2 used to scale the font size has been experimentally determined.
maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11,
Math.ceil(this.height / (2 * this.options.ticks.fontSize)));
var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11, Math.ceil(this.height / (2 * tickFontSize)));
}
// Make sure we always have at least 2 ticks

49
src/scales/scale.radialLinear.js
View File

@ -34,18 +34,9 @@ module.exports = function(Chart) {
},
pointLabels: {
//String - Point label font declaration
fontFamily: Chart.defaults.global.defaultFontFamily,
//String - Point label font weight
fontStyle: Chart.defaults.global.defaultFontStyle,
//Number - Point label font size in pixels
fontSize: 10,
//String - Point label font colour
fontColor: Chart.defaults.global.defaultFontColor,
//Function - Used to convert point labels
callback: function(label) {
return label;
@ -65,7 +56,8 @@ module.exports = function(Chart) {
this.yCenter = Math.round(this.height / 2);
var minSize = helpers.min([this.height, this.width]);
this.drawingArea = (this.options.display) ? (minSize / 2) - (this.options.ticks.fontSize / 2 + this.options.ticks.backdropPaddingY) : (minSize / 2);
var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
this.drawingArea = (this.options.display) ? (minSize / 2) - (tickFontSize / 2 + this.options.ticks.backdropPaddingY) : (minSize / 2);
},
determineDataLimits: function() {
this.min = null;
@ -136,8 +128,8 @@ module.exports = function(Chart) {
// the axis area. For now, we say that the minimum tick spacing in pixels must be 50
// We also limit the maximum number of ticks to 11 which gives a nice 10 squares on
// the graph
var maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11,
Math.ceil(this.drawingArea / (1.5 * this.options.ticks.fontSize)));
var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
var maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11, Math.ceil(this.drawingArea / (1.5 * tickFontSize)));
maxTicks = Math.max(2, maxTicks); // Make sure we always have at least 2 ticks
// To get a "nice" value for the tick spacing, we will use the appropriately named
@ -213,10 +205,14 @@ module.exports = function(Chart) {
* https://dl.dropboxusercontent.com/u/34601363/yeahscience.gif
*/
var pointLabelFontSize = helpers.getValueOrDefault(this.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize);
var pointLabeFontStyle = helpers.getValueOrDefault(this.options.pointLabels.fontStyle, Chart.defaults.global.defaultFontStyle);
var pointLabeFontFamily = helpers.getValueOrDefault(this.options.pointLabels.fontFamily, Chart.defaults.global.defaultFontFamily);
var pointLabeFont = helpers.fontString(pointLabelFontSize, pointLabeFontStyle, pointLabeFontFamily);
// Get maximum radius of the polygon. Either half the height (minus the text width) or half the width.
// Use this to calculate the offset + change. - Make sure L/R protrusion is at least 0 to stop issues with centre points
var largestPossibleRadius = helpers.min([(this.height / 2 - this.options.pointLabels.fontSize - 5), this.width / 2]),
var largestPossibleRadius = helpers.min([(this.height / 2 - pointLabelFontSize - 5), this.width / 2]),
pointPosition,
i,
textWidth,
@ -232,7 +228,8 @@ module.exports = function(Chart) {
radiusReductionRight,
radiusReductionLeft,
maxWidthRadius;
this.ctx.font = helpers.fontString(this.options.pointLabels.fontSize, this.options.pointLabels.fontStyle, this.options.pointLabels.fontFamily);
this.ctx.font = pointLabeFont;
for (i = 0; i < this.getValueCount(); i++) {
// 5px to space the text slightly out - similar to what we do in the draw function.
pointPosition = this.getPointPosition(i, largestPossibleRadius);
@ -357,22 +354,27 @@ module.exports = function(Chart) {
}
if (this.options.ticks.display) {
ctx.font = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily);
var tickFontColor = helpers.getValueOrDefault(this.options.ticks.fontColor, Chart.defaults.global.defaultFontColor);
var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle);
var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily);
var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
ctx.font = tickLabelFont;
if (this.options.ticks.showLabelBackdrop) {
var labelWidth = ctx.measureText(label).width;
ctx.fillStyle = this.options.ticks.backdropColor;
ctx.fillRect(
this.xCenter - labelWidth / 2 - this.options.ticks.backdropPaddingX,
yHeight - this.options.ticks.fontSize / 2 - this.options.ticks.backdropPaddingY,
yHeight - tickFontSize / 2 - this.options.ticks.backdropPaddingY,
labelWidth + this.options.ticks.backdropPaddingX * 2,
this.options.ticks.fontSize + this.options.ticks.backdropPaddingY * 2
tickFontSize + this.options.ticks.backdropPaddingY * 2
);
}
ctx.textAlign = 'center';
ctx.textBaseline = "middle";
ctx.fillStyle = this.options.ticks.fontColor;
ctx.fillStyle = tickFontColor;
ctx.fillText(label, this.xCenter, yHeight);
}
}
@ -393,8 +395,15 @@ module.exports = function(Chart) {
}
// Extra 3px out for some label spacing
var pointLabelPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.options.reverse ? this.min : this.max) + 5);
ctx.font = helpers.fontString(this.options.pointLabels.fontSize, this.options.pointLabels.fontStyle, this.options.pointLabels.fontFamily);
ctx.fillStyle = this.options.pointLabels.fontColor;
var pointLabelFontColor = helpers.getValueOrDefault(this.options.pointLabels.fontColor, Chart.defaults.global.defaultFontColor);
var pointLabelFontSize = helpers.getValueOrDefault(this.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize);
var pointLabeFontStyle = helpers.getValueOrDefault(this.options.pointLabels.fontStyle, Chart.defaults.global.defaultFontStyle);
var pointLabeFontFamily = helpers.getValueOrDefault(this.options.pointLabels.fontFamily, Chart.defaults.global.defaultFontFamily);
var pointLabeFont = helpers.fontString(pointLabelFontSize, pointLabeFontStyle, pointLabeFontFamily);
ctx.font = pointLabeFont;
ctx.fillStyle = pointLabelFontColor;
var labelsCount = this.pointLabels.length,
halfLabelsCount = this.pointLabels.length / 2,

3
src/scales/scale.time.js
View File

@ -145,8 +145,9 @@ module.exports = function(Chart) {
this.tickRange = Math.ceil(this.lastTick.diff(this.firstTick, this.tickUnit, true));
} else {
// Determine the smallest needed unit of the time
var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
var innerWidth = this.isHorizontal() ? this.width - (this.paddingLeft + this.paddingRight) : this.height - (this.paddingTop + this.paddingBottom);
var labelCapacity = innerWidth / (this.options.ticks.fontSize + 10);
var labelCapacity = innerWidth / (tickFontSize + 10);
var buffer = this.options.time.round ? 0 : 1;
// Start as small as possible

16
test/core.helpers.tests.js
View File

@ -225,19 +225,11 @@ describe('Core helper tests', function() {
},
position: "right",
scaleLabel: {
fontColor: '#666',
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
fontSize: 12,
fontStyle: 'normal',
labelString: '',
display: false,
},
ticks: {
beginAtZero: false,
fontColor: "#666",
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
fontSize: 12,
fontStyle: "normal",
maxRotation: 90,
mirror: false,
padding: 10,
@ -263,19 +255,11 @@ describe('Core helper tests', function() {
},
position: "left",
scaleLabel: {
fontColor: '#666',
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
fontSize: 12,
fontStyle: 'normal',
labelString: '',
display: false,
},
ticks: {
beginAtZero: false,
fontColor: "#666",
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
fontSize: 12,
fontStyle: "normal",
maxRotation: 90,
mirror: false,
padding: 10,

4
test/core.legend.tests.js
View File

@ -18,10 +18,6 @@ describe('Legend block tests', function() {
labels: {
boxWidth: 40,
fontSize: Chart.defaults.global.defaultFontSize,
fontStyle: Chart.defaults.global.defaultFontStyle,
fontColor: Chart.defaults.global.defaultFontColor,
fontFamily: Chart.defaults.global.defaultFontFamily,
padding: 10,
generateLabels: jasmine.any(Function)
}

15
test/core.title.tests.js
View File

@ -11,9 +11,6 @@ describe('Title block tests', function() {
display: false,
position: 'top',
fullWidth: true,
fontColor: Chart.defaults.global.defaultFontColor,
fontFamily: Chart.defaults.global.defaultFontFamily,
fontSize: Chart.defaults.global.defaultFontSize,
fontStyle: 'bold',
padding: 10,
text: ''
@ -146,6 +143,9 @@ describe('Title block tests', function() {
title.draw();
expect(context.getCalls()).toEqual([{
name: 'setFillStyle',
args: ['#666']
}, {
name: 'save',
args: []
}, {
@ -154,9 +154,6 @@ describe('Title block tests', function() {
}, {
name: 'rotate',
args: [-0.5 * Math.PI]
}, {
name: 'setFillStyle',
args: ['#666']
}, {
name: 'fillText',
args: ['My title', 0, 0]
@ -179,6 +176,9 @@ describe('Title block tests', function() {
title.draw();
expect(context.getCalls()).toEqual([{
name: 'setFillStyle',
args: ['#666']
}, {
name: 'save',
args: []
}, {
@ -187,9 +187,6 @@ describe('Title block tests', function() {
}, {
name: 'rotate',
args: [0.5 * Math.PI]
}, {
name: 'setFillStyle',
args: ['#666']
}, {
name: 'fillText',
args: ['My title', 0, 0]

8
test/scale.category.tests.js
View File

@ -24,19 +24,11 @@ describe('Category scale tests', function() {
},
position: "bottom",
scaleLabel: {
fontColor: '#666',
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
fontSize: 12,
fontStyle: 'normal',
labelString: '',
display: false,
},
ticks: {
beginAtZero: false,
fontColor: "#666",
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
fontSize: 12,
fontStyle: "normal",
maxRotation: 90,
mirror: false,
padding: 10,

8
test/scale.linear.tests.js
View File

@ -23,19 +23,11 @@ describe('Linear Scale', function() {
},
position: "left",
scaleLabel: {
fontColor: '#666',
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
fontSize: 12,
fontStyle: 'normal',
labelString: '',
display: false,
},
ticks: {
beginAtZero: false,
fontColor: "#666",
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
fontSize: 12,
fontStyle: "normal",
maxRotation: 90,
mirror: false,
padding: 10,

8
test/scale.logarithmic.tests.js
View File

@ -22,19 +22,11 @@ describe('Logarithmic Scale tests', function() {
},
position: "left",
scaleLabel: {
fontColor: '#666',
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
fontSize: 12,
fontStyle: 'normal',
labelString: '',
display: false,
},
ticks: {
beginAtZero: false,
fontColor: "#666",
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
fontSize: 12,
fontStyle: "normal",
maxRotation: 90,
mirror: false,
padding: 10,

11
test/scale.radialLinear.tests.js
View File

@ -28,18 +28,11 @@ describe('Test the radial linear scale', function() {
},
lineArc: false,
pointLabels: {
fontColor: "#666",
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
fontSize: 10,
fontStyle: "normal",
callback: defaultConfig.pointLabels.callback, // make this nicer, then check explicitly below
},
position: "chartArea",
scaleLabel: {
fontColor: '#666',
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
fontSize: 12,
fontStyle: 'normal',
labelString: '',
display: false,
},
@ -48,10 +41,6 @@ describe('Test the radial linear scale', function() {
backdropPaddingY: 2,
backdropPaddingX: 2,
beginAtZero: false,
fontColor: "#666",
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
fontSize: 12,
fontStyle: "normal",
maxRotation: 90,
mirror: false,
padding: 10,

8
test/scale.time.tests.js
View File

@ -27,19 +27,11 @@ describe('Time scale tests', function() {
},
position: "bottom",
scaleLabel: {
fontColor: '#666',
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
fontSize: 12,
fontStyle: 'normal',
labelString: '',
display: false,
},
ticks: {
beginAtZero: false,
fontColor: "#666",
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
fontSize: 12,
fontStyle: "normal",
maxRotation: 90,
mirror: false,
padding: 10,