mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00:00
Performance and minification improvements
This commit is contained in:
Blake Niemyjski
parent
d49ecf98cd
commit
bea68f1424
10
.editorconfig
Normal file
10
.editorconfig
Normal file
@ -0,0 +1,10 @@
|
||||
# http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = tab
|
||||
indent_size = 4
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = false
|
||||
@ -1,15 +1,9 @@
|
||||
"use strict";
|
||||
|
||||
module.exports = function(Chart) {
|
||||
|
||||
var helpers = Chart.helpers;
|
||||
|
||||
var defaultConfig = {
|
||||
aspectRatio: 1
|
||||
};
|
||||
|
||||
|
||||
Chart.Radar = function(context, config) {
|
||||
config.options = helpers.configMerge(defaultConfig, config.options);
|
||||
config.options = Chart.helpers.configMerge({ aspectRatio: 1 }, config.options);
|
||||
config.type = 'radar';
|
||||
|
||||
return new Chart(context, config);
|
||||
|
||||
@ -96,6 +96,10 @@ module.exports = function(Chart) {
|
||||
yScalePoint = yScale.getPixelForValue(0);
|
||||
}
|
||||
|
||||
var rectangleElementOptions = this.chart.options.elements.rectangle;
|
||||
var custom = rectangle.custom;
|
||||
var dataset = this.getDataset();
|
||||
|
||||
helpers.extend(rectangle, {
|
||||
// Utility
|
||||
_chart: this.chart.chart,
|
||||
@ -112,15 +116,15 @@ module.exports = function(Chart) {
|
||||
|
||||
// Tooltip
|
||||
label: this.chart.data.labels[index],
|
||||
datasetLabel: this.getDataset().label,
|
||||
datasetLabel: dataset.label,
|
||||
|
||||
// Appearance
|
||||
base: reset ? yScalePoint : this.calculateBarBase(this.index, index),
|
||||
width: this.calculateBarWidth(numBars),
|
||||
backgroundColor: rectangle.custom && rectangle.custom.backgroundColor ? rectangle.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor),
|
||||
borderSkipped: rectangle.custom && rectangle.custom.borderSkipped ? rectangle.custom.borderSkipped : this.chart.options.elements.rectangle.borderSkipped,
|
||||
borderColor: rectangle.custom && rectangle.custom.borderColor ? rectangle.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor),
|
||||
borderWidth: rectangle.custom && rectangle.custom.borderWidth ? rectangle.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.rectangle.borderWidth)
|
||||
backgroundColor: custom && custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor),
|
||||
borderSkipped: custom && custom.borderSkipped ? custom.borderSkipped : rectangleElementOptions.borderSkipped,
|
||||
borderColor: custom && custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor),
|
||||
borderWidth: custom && custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth)
|
||||
}
|
||||
});
|
||||
rectangle.pivot();
|
||||
@ -134,22 +138,23 @@ module.exports = function(Chart) {
|
||||
var base = 0;
|
||||
|
||||
if (yScale.options.stacked) {
|
||||
|
||||
var value = this.chart.data.datasets[datasetIndex].data[index];
|
||||
var chart = this.chart;
|
||||
var datasets = chart.data.datasets;
|
||||
var value = datasets[datasetIndex].data[index];
|
||||
|
||||
if (value < 0) {
|
||||
for (var i = 0; i < datasetIndex; i++) {
|
||||
var negDS = this.chart.data.datasets[i];
|
||||
var negDSMeta = this.chart.getDatasetMeta(i);
|
||||
if (negDSMeta.bar && negDSMeta.yAxisID === yScale.id && this.chart.isDatasetVisible(i)) {
|
||||
var negDS = datasets[i];
|
||||
var negDSMeta = chart.getDatasetMeta(i);
|
||||
if (negDSMeta.bar && negDSMeta.yAxisID === yScale.id && chart.isDatasetVisible(i)) {
|
||||
base += negDS.data[index] < 0 ? negDS.data[index] : 0;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (var j = 0; j < datasetIndex; j++) {
|
||||
var posDS = this.chart.data.datasets[j];
|
||||
var posDSMeta = this.chart.getDatasetMeta(j);
|
||||
if (posDSMeta.bar && posDSMeta.yAxisID === yScale.id && this.chart.isDatasetVisible(j)) {
|
||||
var posDS = datasets[j];
|
||||
var posDSMeta = chart.getDatasetMeta(j);
|
||||
if (posDSMeta.bar && posDSMeta.yAxisID === yScale.id && chart.isDatasetVisible(j)) {
|
||||
base += posDS.data[index] > 0 ? posDS.data[index] : 0;
|
||||
}
|
||||
}
|
||||
@ -299,18 +304,18 @@ module.exports = function(Chart) {
|
||||
var dataset = this.chart.data.datasets[rectangle._datasetIndex];
|
||||
var index = rectangle._index;
|
||||
|
||||
rectangle._model.backgroundColor = rectangle.custom && rectangle.custom.hoverBackgroundColor ? rectangle.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(rectangle._model.backgroundColor));
|
||||
rectangle._model.borderColor = rectangle.custom && rectangle.custom.hoverBorderColor ? rectangle.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(rectangle._model.borderColor));
|
||||
rectangle._model.borderWidth = rectangle.custom && rectangle.custom.hoverBorderWidth ? rectangle.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, rectangle._model.borderWidth);
|
||||
rectangle._model.backgroundColor = customr && customr.hoverBackgroundColor ? customr.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(rectangle._model.backgroundColor));
|
||||
rectangle._model.borderColor = customr && customr.hoverBorderColor ? customr.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(rectangle._model.borderColor));
|
||||
rectangle._model.borderWidth = customr && customr.hoverBorderWidth ? customr.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, rectangle._model.borderWidth);
|
||||
},
|
||||
|
||||
removeHoverStyle: function(rectangle) {
|
||||
var dataset = this.chart.data.datasets[rectangle._datasetIndex];
|
||||
var index = rectangle._index;
|
||||
|
||||
rectangle._model.backgroundColor = rectangle.custom && rectangle.custom.backgroundColor ? rectangle.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor);
|
||||
rectangle._model.borderColor = rectangle.custom && rectangle.custom.borderColor ? rectangle.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor);
|
||||
rectangle._model.borderWidth = rectangle.custom && rectangle.custom.borderWidth ? rectangle.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.rectangle.borderWidth);
|
||||
rectangle._model.backgroundColor = customr && customr.backgroundColor ? customr.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor);
|
||||
rectangle._model.borderColor = customr && customr.borderColor ? customr.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor);
|
||||
rectangle._model.borderWidth = customr && customr.borderWidth ? customr.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.rectangle.borderWidth);
|
||||
}
|
||||
|
||||
});
|
||||
@ -408,10 +413,10 @@ module.exports = function(Chart) {
|
||||
// Appearance
|
||||
base: reset ? xScalePoint : this.calculateBarBase(this.index, index),
|
||||
height: this.calculateBarHeight(numBars),
|
||||
backgroundColor: rectangle.custom && rectangle.custom.backgroundColor ? rectangle.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor),
|
||||
borderSkipped: rectangle.custom && rectangle.custom.borderSkipped ? rectangle.custom.borderSkipped : this.chart.options.elements.rectangle.borderSkipped,
|
||||
borderColor: rectangle.custom && rectangle.custom.borderColor ? rectangle.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor),
|
||||
borderWidth: rectangle.custom && rectangle.custom.borderWidth ? rectangle.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.rectangle.borderWidth)
|
||||
backgroundColor: customr && customr.backgroundColor ? customr.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor),
|
||||
borderSkipped: customr && customr.borderSkipped ? customr.borderSkipped : this.chart.options.elements.rectangle.borderSkipped,
|
||||
borderColor: customr && customr.borderColor ? customr.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor),
|
||||
borderWidth: customr && customr.borderWidth ? customr.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.rectangle.borderWidth)
|
||||
},
|
||||
|
||||
draw: function () {
|
||||
|
||||
@ -279,10 +279,11 @@ module.exports = function(Chart) {
|
||||
render: function render(duration, lazy) {
|
||||
Chart.pluginService.notifyPlugins('beforeRender', [this]);
|
||||
|
||||
if (this.options.animation && ((typeof duration !== 'undefined' && duration !== 0) || (typeof duration === 'undefined' && this.options.animation.duration !== 0))) {
|
||||
var animationOptions = this.options.animation;
|
||||
if (animationOptions && ((typeof duration !== 'undefined' && duration !== 0) || (typeof duration === 'undefined' && animationOptions.duration !== 0))) {
|
||||
var animation = new Chart.Animation();
|
||||
animation.numSteps = (duration || this.options.animation.duration) / 16.66; //60 fps
|
||||
animation.easing = this.options.animation.easing;
|
||||
animation.numSteps = (duration || animationOptions.duration) / 16.66; //60 fps
|
||||
animation.easing = animationOptions.easing;
|
||||
|
||||
// render function
|
||||
animation.render = function(chartInstance, animationObject) {
|
||||
@ -294,14 +295,14 @@ module.exports = function(Chart) {
|
||||
};
|
||||
|
||||
// user events
|
||||
animation.onAnimationProgress = this.options.animation.onProgress;
|
||||
animation.onAnimationComplete = this.options.animation.onComplete;
|
||||
animation.onAnimationProgress = animationOptions.onProgress;
|
||||
animation.onAnimationComplete = animationOptions.onComplete;
|
||||
|
||||
Chart.animationService.addAnimation(this, animation, duration, lazy);
|
||||
} else {
|
||||
this.draw();
|
||||
if (this.options.animation && this.options.animation.onComplete && this.options.animation.onComplete.call) {
|
||||
this.options.animation.onComplete.call(this);
|
||||
if (animationOptions && animationOptions.onComplete && animationOptions.onComplete.call) {
|
||||
animationOptions.onComplete.call(this);
|
||||
}
|
||||
}
|
||||
return this;
|
||||
@ -322,10 +323,11 @@ module.exports = function(Chart) {
|
||||
}
|
||||
|
||||
// Clip out the chart area so that anything outside does not draw. This is necessary for zoom and pan to function
|
||||
this.chart.ctx.save();
|
||||
this.chart.ctx.beginPath();
|
||||
this.chart.ctx.rect(this.chartArea.left, this.chartArea.top, this.chartArea.right - this.chartArea.left, this.chartArea.bottom - this.chartArea.top);
|
||||
this.chart.ctx.clip();
|
||||
var context = this.chart.ctx;
|
||||
context.save();
|
||||
context.beginPath();
|
||||
context.rect(this.chartArea.left, this.chartArea.top, this.chartArea.right - this.chartArea.left, this.chartArea.bottom - this.chartArea.top);
|
||||
context.clip();
|
||||
|
||||
// Draw each dataset via its respective controller (reversed to support proper line stacking)
|
||||
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
|
||||
@ -335,7 +337,7 @@ module.exports = function(Chart) {
|
||||
}, this, true);
|
||||
|
||||
// Restore from the clipping operation
|
||||
this.chart.ctx.restore();
|
||||
context.restore();
|
||||
|
||||
// Finally draw the tooltip
|
||||
this.tooltip.transition(easingDecimal).draw();
|
||||
@ -540,13 +542,15 @@ module.exports = function(Chart) {
|
||||
if (this.lastActive.length) {
|
||||
switch (this.options.hover.mode) {
|
||||
case 'single':
|
||||
this.getDatasetMeta(this.lastActive[0]._datasetIndex).controller.removeHoverStyle(this.lastActive[0], this.lastActive[0]._datasetIndex, this.lastActive[0]._index);
|
||||
var lastActive = this.lastActive[0];
|
||||
this.getDatasetMeta(lastActive._datasetIndex).controller.removeHoverStyle(lastActive, lastActive._datasetIndex, lastActive._index);
|
||||
break;
|
||||
case 'label':
|
||||
case 'dataset':
|
||||
for (var i = 0; i < this.lastActive.length; i++) {
|
||||
if (this.lastActive[i])
|
||||
this.getDatasetMeta(this.lastActive[i]._datasetIndex).controller.removeHoverStyle(this.lastActive[i], this.lastActive[i]._datasetIndex, this.lastActive[i]._index);
|
||||
var lastActive = this.lastActive[i];
|
||||
if (lastActive)
|
||||
this.getDatasetMeta(lastActive._datasetIndex).controller.removeHoverStyle(lastActive, lastActive._datasetIndex, lastActive._index);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
@ -558,13 +562,15 @@ module.exports = function(Chart) {
|
||||
if (this.active.length && this.options.hover.mode) {
|
||||
switch (this.options.hover.mode) {
|
||||
case 'single':
|
||||
this.getDatasetMeta(this.active[0]._datasetIndex).controller.setHoverStyle(this.active[0]);
|
||||
var active = this.active[0];
|
||||
this.getDatasetMeta(active._datasetIndex).controller.setHoverStyle(active);
|
||||
break;
|
||||
case 'label':
|
||||
case 'dataset':
|
||||
for (var j = 0; j < this.active.length; j++) {
|
||||
if (this.active[j])
|
||||
this.getDatasetMeta(this.active[j]._datasetIndex).controller.setHoverStyle(this.active[j]);
|
||||
var active = this.active[j];
|
||||
if (active)
|
||||
this.getDatasetMeta(active._datasetIndex).controller.setHoverStyle(active);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
@ -572,18 +578,18 @@ module.exports = function(Chart) {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var tooltip = this.tooltip;
|
||||
// Built in Tooltips
|
||||
if (this.options.tooltips.enabled || this.options.tooltips.custom) {
|
||||
|
||||
// The usual updates
|
||||
this.tooltip.initialize();
|
||||
this.tooltip._active = this.tooltipActive;
|
||||
this.tooltip.update(true);
|
||||
tooltip.initialize();
|
||||
tooltip._active = this.tooltipActive;
|
||||
tooltip.update(true);
|
||||
}
|
||||
|
||||
// Hover animations
|
||||
this.tooltip.pivot();
|
||||
tooltip.pivot();
|
||||
|
||||
if (!this.animating) {
|
||||
var changed;
|
||||
@ -608,7 +614,7 @@ module.exports = function(Chart) {
|
||||
this.stop();
|
||||
|
||||
if (this.options.tooltips.enabled || this.options.tooltips.custom) {
|
||||
this.tooltip.update(true);
|
||||
tooltip.update(true);
|
||||
}
|
||||
|
||||
// We only need to render at this point. Updating will cause scales to be recomputed generating flicker & using more
|
||||
|
||||
@ -56,6 +56,6 @@ module.exports = function(Chart) {
|
||||
afterDraw: noop,
|
||||
|
||||
// Called during destroy
|
||||
destroy: noop,
|
||||
destroy: noop
|
||||
});
|
||||
};
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
module.exports = function(Chart) {
|
||||
|
||||
var helpers = Chart.helpers;
|
||||
var globalDefaults = Chart.defaults.global;
|
||||
|
||||
Chart.defaults.scale = {
|
||||
display: true,
|
||||
@ -180,19 +181,22 @@ module.exports = function(Chart) {
|
||||
helpers.callCallback(this.options.beforeCalculateTickRotation, [this]);
|
||||
},
|
||||
calculateTickRotation: function() {
|
||||
var context = this.ctx;
|
||||
var optionTicks = this.options.ticks;
|
||||
|
||||
//Get the width of each grid by calculating the difference
|
||||
//between x offsets between 0 and 1.
|
||||
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 tickFontSize = helpers.getValueOrDefault(optionTicks.fontSize, globalDefaults.defaultFontSize);
|
||||
var tickFontStyle = helpers.getValueOrDefault(optionTicks.fontStyle, globalDefaults.defaultFontStyle);
|
||||
var tickFontFamily = helpers.getValueOrDefault(optionTicks.fontFamily, globalDefaults.defaultFontFamily);
|
||||
var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
|
||||
this.ctx.font = tickLabelFont;
|
||||
context.font = tickLabelFont;
|
||||
|
||||
var firstWidth = this.ctx.measureText(this.ticks[0]).width;
|
||||
var lastWidth = this.ctx.measureText(this.ticks[this.ticks.length - 1]).width;
|
||||
var firstWidth = context.measureText(this.ticks[0]).width;
|
||||
var lastWidth = context.measureText(this.ticks[this.ticks.length - 1]).width;
|
||||
var firstRotated;
|
||||
|
||||
this.labelRotation = this.options.ticks.minRotation || 0;
|
||||
this.labelRotation = optionTicks.minRotation || 0;
|
||||
this.paddingRight = 0;
|
||||
this.paddingLeft = 0;
|
||||
|
||||
@ -204,7 +208,7 @@ module.exports = function(Chart) {
|
||||
if (!this.longestTextCache) {
|
||||
this.longestTextCache = {};
|
||||
}
|
||||
var originalLabelWidth = helpers.longestText(this.ctx, tickLabelFont, this.ticks, this.longestTextCache);
|
||||
var originalLabelWidth = helpers.longestText(context, tickLabelFont, this.ticks, this.longestTextCache);
|
||||
var labelWidth = originalLabelWidth;
|
||||
var cosRotation;
|
||||
var sinRotation;
|
||||
@ -214,7 +218,7 @@ module.exports = function(Chart) {
|
||||
var tickWidth = this.getPixelForTick(1) - this.getPixelForTick(0) - 6;
|
||||
|
||||
//Max label rotation can be set or default to 90 - also act as a loop counter
|
||||
while (labelWidth > tickWidth && this.labelRotation < this.options.ticks.maxRotation) {
|
||||
while (labelWidth > tickWidth && this.labelRotation < optionTicks.maxRotation) {
|
||||
cosRotation = Math.cos(helpers.toRadians(this.labelRotation));
|
||||
sinRotation = Math.sin(helpers.toRadians(this.labelRotation));
|
||||
|
||||
@ -263,18 +267,17 @@ module.exports = function(Chart) {
|
||||
var opts = this.options;
|
||||
var tickOpts = opts.ticks;
|
||||
var scaleLabelOpts = opts.scaleLabel;
|
||||
var globalOpts = Chart.defaults.global;
|
||||
var display = opts.display;
|
||||
var isHorizontal = this.isHorizontal();
|
||||
|
||||
var tickFontSize = helpers.getValueOrDefault(tickOpts.fontSize, globalOpts.defaultFontSize);
|
||||
var tickFontStyle = helpers.getValueOrDefault(tickOpts.fontStyle, globalOpts.defaultFontStyle);
|
||||
var tickFontFamily = helpers.getValueOrDefault(tickOpts.fontFamily, globalOpts.defaultFontFamily);
|
||||
var tickFontSize = helpers.getValueOrDefault(tickOpts.fontSize, globalDefaults.defaultFontSize);
|
||||
var tickFontStyle = helpers.getValueOrDefault(tickOpts.fontStyle, globalDefaults.defaultFontStyle);
|
||||
var tickFontFamily = helpers.getValueOrDefault(tickOpts.fontFamily, globalDefaults.defaultFontFamily);
|
||||
var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
|
||||
|
||||
var scaleLabelFontSize = helpers.getValueOrDefault(scaleLabelOpts.fontSize, globalOpts.defaultFontSize);
|
||||
var scaleLabelFontStyle = helpers.getValueOrDefault(scaleLabelOpts.fontStyle, globalOpts.defaultFontStyle);
|
||||
var scaleLabelFontFamily = helpers.getValueOrDefault(scaleLabelOpts.fontFamily, globalOpts.defaultFontFamily);
|
||||
var scaleLabelFontSize = helpers.getValueOrDefault(scaleLabelOpts.fontSize, globalDefaults.defaultFontSize);
|
||||
var scaleLabelFontStyle = helpers.getValueOrDefault(scaleLabelOpts.fontStyle, globalDefaults.defaultFontStyle);
|
||||
var scaleLabelFontFamily = helpers.getValueOrDefault(scaleLabelOpts.fontFamily, globalDefaults.defaultFontFamily);
|
||||
var scaleLabelFont = helpers.fontString(scaleLabelFontSize, scaleLabelFontStyle, scaleLabelFontFamily);
|
||||
|
||||
var tickMarkLength = opts.gridLines.tickMarkLength;
|
||||
@ -450,42 +453,46 @@ module.exports = function(Chart) {
|
||||
// @param {rectangle} chartArea : the area of the chart to draw full grid lines on
|
||||
draw: function(chartArea) {
|
||||
if (this.options.display) {
|
||||
var context = this.ctx;
|
||||
var ticks = this.options.ticks;
|
||||
var gridLines = this.options.gridLines;
|
||||
var scaleLabel = this.options.scaleLabel;
|
||||
|
||||
var setContextLineSettings;
|
||||
var isRotated = this.labelRotation !== 0;
|
||||
var skipRatio;
|
||||
var scaleLabelX;
|
||||
var scaleLabelY;
|
||||
var useAutoskipper = this.options.ticks.autoSkip;
|
||||
] var useAutoskipper = ticks.autoSkip;
|
||||
|
||||
|
||||
// figure out the maximum number of gridlines to show
|
||||
var maxTicks;
|
||||
|
||||
if (this.options.ticks.maxTicksLimit) {
|
||||
maxTicks = this.options.ticks.maxTicksLimit;
|
||||
if (ticks.maxTicksLimit) {
|
||||
maxTicks = ticks.maxTicksLimit;
|
||||
}
|
||||
|
||||
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 tickFontColor = helpers.getValueOrDefault(ticks.fontColor, globalDefaults.defaultFontColor);
|
||||
var tickFontSize = helpers.getValueOrDefault(ticks.fontSize, globalDefaults.defaultFontSize);
|
||||
var tickFontStyle = helpers.getValueOrDefault(ticks.fontStyle, globalDefaults.defaultFontStyle);
|
||||
var tickFontFamily = helpers.getValueOrDefault(ticks.fontFamily, globalDefaults.defaultFontFamily);
|
||||
var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
|
||||
var tl = this.options.gridLines.tickMarkLength;
|
||||
var tl = gridLines.tickMarkLength;
|
||||
|
||||
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 scaleLabelFontColor = helpers.getValueOrDefault(scaleLabel.fontColor, globalDefaults.defaultFontColor);
|
||||
var scaleLabelFontSize = helpers.getValueOrDefault(scaleLabel.fontSize, globalDefaults.defaultFontSize);
|
||||
var scaleLabelFontStyle = helpers.getValueOrDefault(scaleLabel.fontStyle, globalDefaults.defaultFontStyle);
|
||||
var scaleLabelFontFamily = helpers.getValueOrDefault(scaleLabel.fontFamily, globalDefaults.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 labelRotationRadians = helpers.toRadians(this.labelRotation);
|
||||
var cosRotation = Math.cos(labelRotationRadians);
|
||||
var sinRotation = Math.sin(labelRotationRadians);
|
||||
var longestRotatedLabel = this.longestLabelWidth * cosRotation;
|
||||
var rotatedLabelHeight = tickFontSize * sinRotation;
|
||||
|
||||
// Make sure we draw text in the correct color and font
|
||||
this.ctx.fillStyle = tickFontColor;
|
||||
context.fillStyle = tickFontColor;
|
||||
|
||||
if (this.isHorizontal()) {
|
||||
setContextLineSettings = true;
|
||||
@ -493,8 +500,8 @@ module.exports = function(Chart) {
|
||||
var yTickEnd = this.options.position === "bottom" ? this.top + tl : this.bottom;
|
||||
skipRatio = false;
|
||||
|
||||
if (((longestRotatedLabel / 2) + this.options.ticks.autoSkipPadding) * this.ticks.length > (this.width - (this.paddingLeft + this.paddingRight))) {
|
||||
skipRatio = 1 + Math.floor((((longestRotatedLabel / 2) + this.options.ticks.autoSkipPadding) * this.ticks.length) / (this.width - (this.paddingLeft + this.paddingRight)));
|
||||
if (((longestRotatedLabel / 2) + ticks.autoSkipPadding) * this.ticks.length > (this.width - (this.paddingLeft + this.paddingRight))) {
|
||||
skipRatio = 1 + Math.floor((((longestRotatedLabel / 2) + ticks.autoSkipPadding) * this.ticks.length) / (this.width - (this.paddingLeft + this.paddingRight)));
|
||||
}
|
||||
|
||||
// if they defined a max number of ticks,
|
||||
@ -522,63 +529,63 @@ module.exports = function(Chart) {
|
||||
return;
|
||||
}
|
||||
var xLineValue = this.getPixelForTick(index); // xvalues for grid lines
|
||||
var xLabelValue = this.getPixelForTick(index, this.options.gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option)
|
||||
var xLabelValue = this.getPixelForTick(index, gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option)
|
||||
|
||||
if (this.options.gridLines.display) {
|
||||
if (gridLines.display) {
|
||||
if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) {
|
||||
// Draw the first index specially
|
||||
this.ctx.lineWidth = this.options.gridLines.zeroLineWidth;
|
||||
this.ctx.strokeStyle = this.options.gridLines.zeroLineColor;
|
||||
context.lineWidth = gridLines.zeroLineWidth;
|
||||
context.strokeStyle = gridLines.zeroLineColor;
|
||||
setContextLineSettings = true; // reset next time
|
||||
} else if (setContextLineSettings) {
|
||||
this.ctx.lineWidth = this.options.gridLines.lineWidth;
|
||||
this.ctx.strokeStyle = this.options.gridLines.color;
|
||||
context.lineWidth = gridLines.lineWidth;
|
||||
context.strokeStyle = gridLines.color;
|
||||
setContextLineSettings = false;
|
||||
}
|
||||
|
||||
xLineValue += helpers.aliasPixel(this.ctx.lineWidth);
|
||||
xLineValue += helpers.aliasPixel(context.lineWidth);
|
||||
|
||||
// Draw the label area
|
||||
this.ctx.beginPath();
|
||||
context.beginPath();
|
||||
|
||||
if (this.options.gridLines.drawTicks) {
|
||||
this.ctx.moveTo(xLineValue, yTickStart);
|
||||
this.ctx.lineTo(xLineValue, yTickEnd);
|
||||
if (gridLines.drawTicks) {
|
||||
context.moveTo(xLineValue, yTickStart);
|
||||
context.lineTo(xLineValue, yTickEnd);
|
||||
}
|
||||
|
||||
// Draw the chart area
|
||||
if (this.options.gridLines.drawOnChartArea) {
|
||||
this.ctx.moveTo(xLineValue, chartArea.top);
|
||||
this.ctx.lineTo(xLineValue, chartArea.bottom);
|
||||
if (gridLines.drawOnChartArea) {
|
||||
context.moveTo(xLineValue, chartArea.top);
|
||||
context.lineTo(xLineValue, chartArea.bottom);
|
||||
}
|
||||
|
||||
// Need to stroke in the loop because we are potentially changing line widths & colours
|
||||
this.ctx.stroke();
|
||||
context.stroke();
|
||||
}
|
||||
|
||||
if (this.options.ticks.display) {
|
||||
this.ctx.save();
|
||||
this.ctx.translate(xLabelValue + this.options.ticks.labelOffset, (isRotated) ? this.top + 12 : this.options.position === "top" ? this.bottom - tl : this.top + tl);
|
||||
this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1);
|
||||
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);
|
||||
this.ctx.restore();
|
||||
if (ticks.display) {
|
||||
context.save();
|
||||
context.translate(xLabelValue + ticks.labelOffset, (isRotated) ? this.top + 12 : this.options.position === "top" ? this.bottom - tl : this.top + tl);
|
||||
context.rotate(labelRotationRadians * -1);
|
||||
context.font = tickLabelFont;
|
||||
context.textAlign = (isRotated) ? "right" : "center";
|
||||
context.textBaseline = (isRotated) ? "middle" : this.options.position === "top" ? "bottom" : "top";
|
||||
context.fillText(label, 0, 0);
|
||||
context.restore();
|
||||
}
|
||||
}, this);
|
||||
|
||||
if (this.options.scaleLabel.display) {
|
||||
if (scaleLabel.display) {
|
||||
// Draw the scale label
|
||||
this.ctx.textAlign = "center";
|
||||
this.ctx.textBaseline = 'middle';
|
||||
this.ctx.fillStyle = scaleLabelFontColor; // render in correct colour
|
||||
this.ctx.font = scaleLabelFont;
|
||||
context.textAlign = "center";
|
||||
context.textBaseline = 'middle';
|
||||
context.fillStyle = scaleLabelFontColor; // render in correct colour
|
||||
context.font = scaleLabelFont;
|
||||
|
||||
scaleLabelX = this.left + ((this.right - this.left) / 2); // midpoint of the width
|
||||
scaleLabelY = this.options.position === 'bottom' ? this.bottom - (scaleLabelFontSize / 2) : this.top + (scaleLabelFontSize / 2);
|
||||
|
||||
this.ctx.fillText(this.options.scaleLabel.labelString, scaleLabelX, scaleLabelY);
|
||||
context.fillText(scaleLabel.labelString, scaleLabelX, scaleLabelY);
|
||||
}
|
||||
|
||||
} else {
|
||||
@ -594,112 +601,113 @@ module.exports = function(Chart) {
|
||||
|
||||
var yLineValue = this.getPixelForTick(index); // xvalues for grid lines
|
||||
|
||||
if (this.options.gridLines.display) {
|
||||
if (gridLines.display) {
|
||||
if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) {
|
||||
// Draw the first index specially
|
||||
this.ctx.lineWidth = this.options.gridLines.zeroLineWidth;
|
||||
this.ctx.strokeStyle = this.options.gridLines.zeroLineColor;
|
||||
context.lineWidth = gridLines.zeroLineWidth;
|
||||
context.strokeStyle = gridLines.zeroLineColor;
|
||||
setContextLineSettings = true; // reset next time
|
||||
} else if (setContextLineSettings) {
|
||||
this.ctx.lineWidth = this.options.gridLines.lineWidth;
|
||||
this.ctx.strokeStyle = this.options.gridLines.color;
|
||||
context.lineWidth = gridLines.lineWidth;
|
||||
context.strokeStyle = gridLines.color;
|
||||
setContextLineSettings = false;
|
||||
}
|
||||
|
||||
yLineValue += helpers.aliasPixel(this.ctx.lineWidth);
|
||||
yLineValue += helpers.aliasPixel(context.lineWidth);
|
||||
|
||||
// Draw the label area
|
||||
this.ctx.beginPath();
|
||||
context.beginPath();
|
||||
|
||||
if (this.options.gridLines.drawTicks) {
|
||||
this.ctx.moveTo(xTickStart, yLineValue);
|
||||
this.ctx.lineTo(xTickEnd, yLineValue);
|
||||
if (gridLines.drawTicks) {
|
||||
context.moveTo(xTickStart, yLineValue);
|
||||
context.lineTo(xTickEnd, yLineValue);
|
||||
}
|
||||
|
||||
// Draw the chart area
|
||||
if (this.options.gridLines.drawOnChartArea) {
|
||||
this.ctx.moveTo(chartArea.left, yLineValue);
|
||||
this.ctx.lineTo(chartArea.right, yLineValue);
|
||||
if (gridLines.drawOnChartArea) {
|
||||
context.moveTo(chartArea.left, yLineValue);
|
||||
context.lineTo(chartArea.right, yLineValue);
|
||||
}
|
||||
|
||||
// Need to stroke in the loop because we are potentially changing line widths & colours
|
||||
this.ctx.stroke();
|
||||
context.stroke();
|
||||
}
|
||||
|
||||
if (this.options.ticks.display) {
|
||||
if (ticks.display) {
|
||||
var xLabelValue;
|
||||
var yLabelValue = this.getPixelForTick(index, this.options.gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option)
|
||||
var yLabelValue = this.getPixelForTick(index, gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option)
|
||||
|
||||
this.ctx.save();
|
||||
context.save();
|
||||
|
||||
if (this.options.position === "left") {
|
||||
if (this.options.ticks.mirror) {
|
||||
xLabelValue = this.right + this.options.ticks.padding;
|
||||
this.ctx.textAlign = "left";
|
||||
if (ticks.mirror) {
|
||||
xLabelValue = this.right + ticks.padding;
|
||||
context.textAlign = "left";
|
||||
} else {
|
||||
xLabelValue = this.right - this.options.ticks.padding;
|
||||
this.ctx.textAlign = "right";
|
||||
xLabelValue = this.right - ticks.padding;
|
||||
context.textAlign = "right";
|
||||
}
|
||||
} else {
|
||||
// right side
|
||||
if (this.options.ticks.mirror) {
|
||||
xLabelValue = this.left - this.options.ticks.padding;
|
||||
this.ctx.textAlign = "right";
|
||||
if (ticks.mirror) {
|
||||
xLabelValue = this.left - ticks.padding;
|
||||
context.textAlign = "right";
|
||||
} else {
|
||||
xLabelValue = this.left + this.options.ticks.padding;
|
||||
this.ctx.textAlign = "left";
|
||||
xLabelValue = this.left + ticks.padding;
|
||||
context.textAlign = "left";
|
||||
}
|
||||
}
|
||||
|
||||
this.ctx.translate(xLabelValue, yLabelValue + this.options.ticks.labelOffset);
|
||||
this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1);
|
||||
this.ctx.font = tickLabelFont;
|
||||
this.ctx.textBaseline = "middle";
|
||||
this.ctx.fillText(label, 0, 0);
|
||||
this.ctx.restore();
|
||||
context.translate(xLabelValue, yLabelValue + ticks.labelOffset);
|
||||
context.rotate(labelRotationRadians * -1);
|
||||
context.font = tickLabelFont;
|
||||
context.textBaseline = "middle";
|
||||
context.fillText(label, 0, 0);
|
||||
context.restore();
|
||||
}
|
||||
}, this);
|
||||
|
||||
if (this.options.scaleLabel.display) {
|
||||
if (scaleLabel.display) {
|
||||
// Draw the scale label
|
||||
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;
|
||||
|
||||
this.ctx.save();
|
||||
this.ctx.translate(scaleLabelX, scaleLabelY);
|
||||
this.ctx.rotate(rotation);
|
||||
this.ctx.textAlign = "center";
|
||||
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();
|
||||
context.save();
|
||||
context.translate(scaleLabelX, scaleLabelY);
|
||||
context.rotate(rotation);
|
||||
context.textAlign = "center";
|
||||
context.fillStyle =scaleLabelFontColor; // render in correct colour
|
||||
context.font = scaleLabelFont;
|
||||
context.textBaseline = 'middle';
|
||||
context.fillText(scaleLabel.labelString, 0, 0);
|
||||
context.restore();
|
||||
}
|
||||
}
|
||||
|
||||
// Draw the line at the edge of the axis
|
||||
this.ctx.lineWidth = this.options.gridLines.lineWidth;
|
||||
this.ctx.strokeStyle = this.options.gridLines.color;
|
||||
context.lineWidth = gridLines.lineWidth;
|
||||
context.strokeStyle = gridLines.color;
|
||||
var x1 = this.left,
|
||||
x2 = this.right,
|
||||
y1 = this.top,
|
||||
y2 = this.bottom;
|
||||
|
||||
var aliasPixel = helpers.aliasPixel(context.lineWidth);
|
||||
if (this.isHorizontal()) {
|
||||
y1 = y2 = this.options.position === 'top' ? this.bottom : this.top;
|
||||
y1 += helpers.aliasPixel(this.ctx.lineWidth);
|
||||
y2 += helpers.aliasPixel(this.ctx.lineWidth);
|
||||
y1 += aliasPixel;
|
||||
y2 += aliasPixel;
|
||||
} else {
|
||||
x1 = x2 = this.options.position === 'left' ? this.right : this.left;
|
||||
x1 += helpers.aliasPixel(this.ctx.lineWidth);
|
||||
x2 += helpers.aliasPixel(this.ctx.lineWidth);
|
||||
x1 += aliasPixel;
|
||||
x2 += aliasPixel;
|
||||
}
|
||||
|
||||
this.ctx.beginPath();
|
||||
this.ctx.moveTo(x1, y1);
|
||||
this.ctx.lineTo(x2, y2);
|
||||
this.ctx.stroke();
|
||||
context.beginPath();
|
||||
context.moveTo(x1, y1);
|
||||
context.lineTo(x2, y2);
|
||||
context.stroke();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -84,47 +84,50 @@ module.exports = function(Chart) {
|
||||
|
||||
Chart.Tooltip = Chart.Element.extend({
|
||||
initialize: function() {
|
||||
var globalDefaults = Chart.defaults.global;
|
||||
var options = this._options;
|
||||
var tooltips = options.tooltips;
|
||||
|
||||
helpers.extend(this, {
|
||||
_model: {
|
||||
// Positioning
|
||||
xPadding: options.tooltips.xPadding,
|
||||
yPadding: options.tooltips.yPadding,
|
||||
xAlign : options.tooltips.yAlign,
|
||||
yAlign : options.tooltips.xAlign,
|
||||
xPadding: tooltips.xPadding,
|
||||
yPadding: tooltips.yPadding,
|
||||
xAlign : tooltips.yAlign,
|
||||
yAlign : tooltips.xAlign,
|
||||
|
||||
// Body
|
||||
bodyColor: options.tooltips.bodyColor,
|
||||
_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: helpers.getValueOrDefault(options.tooltips.bodyFontSize, Chart.defaults.global.defaultFontSize),
|
||||
bodySpacing: options.tooltips.bodySpacing,
|
||||
bodyColor: tooltips.bodyColor,
|
||||
_bodyFontFamily: helpers.getValueOrDefault(tooltips.bodyFontFamily, globalDefaults.defaultFontFamily),
|
||||
_bodyFontStyle: helpers.getValueOrDefault(tooltips.bodyFontStyle, globalDefaults.defaultFontStyle),
|
||||
_bodyAlign: tooltips.bodyAlign,
|
||||
bodyFontSize: helpers.getValueOrDefault(tooltips.bodyFontSize, globalDefaults.defaultFontSize),
|
||||
bodySpacing: tooltips.bodySpacing,
|
||||
|
||||
// Title
|
||||
titleColor: options.tooltips.titleColor,
|
||||
_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,
|
||||
titleColor: tooltips.titleColor,
|
||||
_titleFontFamily: helpers.getValueOrDefault(tooltips.titleFontFamily, globalDefaults.defaultFontFamily),
|
||||
_titleFontStyle: helpers.getValueOrDefault(tooltips.titleFontStyle, globalDefaults.defaultFontStyle),
|
||||
titleFontSize: helpers.getValueOrDefault(tooltips.titleFontSize, globalDefaults.defaultFontSize),
|
||||
_titleAlign: tooltips.titleAlign,
|
||||
titleSpacing: tooltips.titleSpacing,
|
||||
titleMarginBottom: tooltips.titleMarginBottom,
|
||||
|
||||
// Footer
|
||||
footerColor: options.tooltips.footerColor,
|
||||
_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,
|
||||
footerColor: tooltips.footerColor,
|
||||
_footerFontFamily: helpers.getValueOrDefault(tooltips.footerFontFamily, globalDefaults.defaultFontFamily),
|
||||
_footerFontStyle: helpers.getValueOrDefault(tooltips.footerFontStyle, globalDefaults.defaultFontStyle),
|
||||
footerFontSize: helpers.getValueOrDefault(tooltips.footerFontSize, globalDefaults.defaultFontSize),
|
||||
_footerAlign: tooltips.footerAlign,
|
||||
footerSpacing: tooltips.footerSpacing,
|
||||
footerMarginTop: tooltips.footerMarginTop,
|
||||
|
||||
// Appearance
|
||||
caretSize: options.tooltips.caretSize,
|
||||
cornerRadius: options.tooltips.cornerRadius,
|
||||
backgroundColor: options.tooltips.backgroundColor,
|
||||
caretSize: tooltips.caretSize,
|
||||
cornerRadius: tooltips.cornerRadius,
|
||||
backgroundColor: tooltips.backgroundColor,
|
||||
opacity: 0,
|
||||
legendColorBackground: options.tooltips.multiKeyBackground
|
||||
legendColorBackground: tooltips.multiKeyBackground
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
@ -3,12 +3,13 @@
|
||||
module.exports = function(Chart) {
|
||||
|
||||
var helpers = Chart.helpers;
|
||||
var globalDefaults = Chart.defaults.global;
|
||||
|
||||
Chart.defaults.global.elements.line = {
|
||||
tension: 0.4,
|
||||
backgroundColor: Chart.defaults.global.defaultColor,
|
||||
backgroundColor: globalDefaults.defaultColor,
|
||||
borderWidth: 3,
|
||||
borderColor: Chart.defaults.global.defaultColor,
|
||||
borderColor: globalDefaults.defaultColor,
|
||||
borderCapStyle: 'butt',
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
@ -115,23 +116,24 @@ module.exports = function(Chart) {
|
||||
ctx.lineTo(this._children[0]._view.x, vm.scaleZero);
|
||||
}
|
||||
|
||||
ctx.fillStyle = vm.backgroundColor || Chart.defaults.global.defaultColor;
|
||||
ctx.fillStyle = vm.backgroundColor || globalDefaults.defaultColor;
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
var globalOptionLineElements = globalDefaults.elements.line;
|
||||
// Now draw the line between all the points with any borders
|
||||
ctx.lineCap = vm.borderCapStyle || Chart.defaults.global.elements.line.borderCapStyle;
|
||||
ctx.lineCap = vm.borderCapStyle || globalOptionLineElements.borderCapStyle;
|
||||
|
||||
// IE 9 and 10 do not support line dash
|
||||
if (ctx.setLineDash) {
|
||||
ctx.setLineDash(vm.borderDash || Chart.defaults.global.elements.line.borderDash);
|
||||
ctx.setLineDash(vm.borderDash || globalOptionLineElements.borderDash);
|
||||
}
|
||||
|
||||
ctx.lineDashOffset = vm.borderDashOffset || Chart.defaults.global.elements.line.borderDashOffset;
|
||||
ctx.lineJoin = vm.borderJoinStyle || Chart.defaults.global.elements.line.borderJoinStyle;
|
||||
ctx.lineWidth = vm.borderWidth || Chart.defaults.global.elements.line.borderWidth;
|
||||
ctx.strokeStyle = vm.borderColor || Chart.defaults.global.defaultColor;
|
||||
ctx.lineDashOffset = vm.borderDashOffset || globalOptionLineElements.borderDashOffset;
|
||||
ctx.lineJoin = vm.borderJoinStyle || globalOptionLineElements.borderJoinStyle;
|
||||
ctx.lineWidth = vm.borderWidth || globalOptionLineElements.borderWidth;
|
||||
ctx.strokeStyle = vm.borderColor || globalDefaults.defaultColor;
|
||||
ctx.beginPath();
|
||||
|
||||
helpers.each(this._children, function(point, index) {
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
module.exports = function(Chart) {
|
||||
|
||||
var helpers = Chart.helpers;
|
||||
var globalDefaults = globalDefaults;
|
||||
|
||||
var defaultConfig = {
|
||||
display: true,
|
||||
@ -49,6 +50,7 @@ module.exports = function(Chart) {
|
||||
return this.chart.data.labels.length;
|
||||
},
|
||||
setDimensions: function() {
|
||||
var options = this.options;
|
||||
// Set the unconstrained dimension before label rotation
|
||||
this.width = this.maxWidth;
|
||||
this.height = this.maxHeight;
|
||||
@ -56,8 +58,8 @@ module.exports = function(Chart) {
|
||||
this.yCenter = Math.round(this.height / 2);
|
||||
|
||||
var minSize = helpers.min([this.height, this.width]);
|
||||
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);
|
||||
var tickFontSize = helpers.getValueOrDefault(options.ticks.fontSize, globalDefaults.defaultFontSize);
|
||||
this.drawingArea = (options.display) ? (minSize / 2) - (tickFontSize / 2 + options.ticks.backdropPaddingY) : (minSize / 2);
|
||||
},
|
||||
determineDataLimits: function() {
|
||||
this.min = null;
|
||||
@ -129,7 +131,7 @@ 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 tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
|
||||
var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, globalDefaults.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
|
||||
|
||||
@ -206,9 +208,10 @@ 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 pointLabels = this.options.pointLabels;
|
||||
var pointLabelFontSize = helpers.getValueOrDefault(pointLabels.fontSize, globalDefaults.defaultFontSize);
|
||||
var pointLabeFontStyle = helpers.getValueOrDefault(pointLabels.fontStyle, globalDefaults.defaultFontStyle);
|
||||
var pointLabeFontFamily = helpers.getValueOrDefault(pointLabels.fontFamily, globalDefaults.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.
|
||||
@ -355,10 +358,10 @@ module.exports = function(Chart) {
|
||||
}
|
||||
|
||||
if (this.options.ticks.display) {
|
||||
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 tickFontColor = helpers.getValueOrDefault(this.options.ticks.fontColor, globalDefaults.defaultFontColor);
|
||||
var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, globalDefaults.defaultFontSize);
|
||||
var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, globalDefaults.defaultFontStyle);
|
||||
var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, globalDefaults.defaultFontFamily);
|
||||
var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
|
||||
ctx.font = tickLabelFont;
|
||||
|
||||
@ -397,10 +400,10 @@ 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);
|
||||
|
||||
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 pointLabelFontColor = helpers.getValueOrDefault(this.options.pointLabels.fontColor, globalDefaults.defaultFontColor);
|
||||
var pointLabelFontSize = helpers.getValueOrDefault(this.options.pointLabels.fontSize, globalDefaults.defaultFontSize);
|
||||
var pointLabeFontStyle = helpers.getValueOrDefault(this.options.pointLabels.fontStyle, globalDefaults.defaultFontStyle);
|
||||
var pointLabeFontFamily = helpers.getValueOrDefault(this.options.pointLabels.fontFamily, globalDefaults.defaultFontFamily);
|
||||
var pointLabeFont = helpers.fontString(pointLabelFontSize, pointLabeFontStyle, pointLabeFontFamily);
|
||||
|
||||
ctx.font = pointLabeFont;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user