mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 20:29:12 +02:00
Improve core and polar area
This commit is contained in:
parent
11345b6c89
commit
600f5b9ba0
@ -109,7 +109,7 @@ module.exports = function(Chart) {
|
||||
var _this = this;
|
||||
var chart = _this.chart;
|
||||
var chartArea = chart.chartArea;
|
||||
var meta = this.getMeta();
|
||||
var meta = _this.getMeta();
|
||||
var opts = chart.options;
|
||||
var arcOpts = opts.elements.arc;
|
||||
var minSize = Math.min(chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
|
||||
@ -154,24 +154,12 @@ module.exports = function(Chart) {
|
||||
}
|
||||
}
|
||||
|
||||
var distance = arc.hidden? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]);
|
||||
var startAngle = (-0.5 * Math.PI) + (circumference * visibleCount);
|
||||
var endAngle = startAngle + (arc.hidden? 0 : circumference);
|
||||
var negHalfPI = -0.5 * Math.PI;
|
||||
var distance = arc.hidden ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]);
|
||||
var startAngle = (negHalfPI) + (circumference * visibleCount);
|
||||
var endAngle = startAngle + (arc.hidden ? 0 : circumference);
|
||||
|
||||
var resetModel = {
|
||||
x: centerX,
|
||||
y: centerY,
|
||||
innerRadius: 0,
|
||||
outerRadius: animationOpts.animateScale ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]),
|
||||
startAngle: animationOpts.animateRotate ? Math.PI * -0.5 : startAngle,
|
||||
endAngle: animationOpts.animateRotate ? Math.PI * -0.5 : endAngle,
|
||||
|
||||
backgroundColor: custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor),
|
||||
borderWidth: custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth),
|
||||
borderColor: custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor),
|
||||
|
||||
label: getValueAtIndexOrDefault(labels, index, labels[index])
|
||||
};
|
||||
var resetRadius = animationOpts.animateScale ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]);
|
||||
|
||||
helpers.extend(arc, {
|
||||
// Utility
|
||||
@ -180,22 +168,20 @@ module.exports = function(Chart) {
|
||||
_scale: scale,
|
||||
|
||||
// Desired view properties
|
||||
_model: reset ? resetModel : {
|
||||
_model: {
|
||||
x: centerX,
|
||||
y: centerY,
|
||||
innerRadius: 0,
|
||||
outerRadius: distance,
|
||||
startAngle: startAngle,
|
||||
endAngle: endAngle,
|
||||
|
||||
backgroundColor: custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor),
|
||||
borderWidth: custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth),
|
||||
borderColor: custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor),
|
||||
|
||||
outerRadius: reset ? resetRadius : distance,
|
||||
startAngle: reset && animationOpts.animateRotate ? negHalfPI : startAngle,
|
||||
endAngle: reset && animationOpts.animateRotate ? negHalfPI : endAngle,
|
||||
label: getValueAtIndexOrDefault(labels, index, labels[index])
|
||||
}
|
||||
});
|
||||
|
||||
// Apply border and fill style
|
||||
_this.removeHoverStyle(arc);
|
||||
|
||||
arc.pivot();
|
||||
},
|
||||
|
||||
|
@ -4,7 +4,9 @@ module.exports = function() {
|
||||
|
||||
//Occupy the global variable of Chart, and create a simple base class
|
||||
var Chart = function(context, config) {
|
||||
this.config = config;
|
||||
var me = this;
|
||||
var helpers = Chart.helpers;
|
||||
me.config = config;
|
||||
|
||||
// Support a jQuery'd canvas element
|
||||
if (context.length && context[0].getContext) {
|
||||
@ -16,45 +18,44 @@ module.exports = function() {
|
||||
context = context.getContext("2d");
|
||||
}
|
||||
|
||||
this.ctx = context;
|
||||
this.canvas = context.canvas;
|
||||
me.ctx = context;
|
||||
me.canvas = context.canvas;
|
||||
|
||||
// Figure out what the size of the chart will be.
|
||||
// If the canvas has a specified width and height, we use those else
|
||||
// we look to see if the canvas node has a CSS width and height.
|
||||
// If there is still no height, fill the parent container
|
||||
this.width = context.canvas.width || parseInt(Chart.helpers.getStyle(context.canvas, 'width')) || Chart.helpers.getMaximumWidth(context.canvas);
|
||||
this.height = context.canvas.height || parseInt(Chart.helpers.getStyle(context.canvas, 'height')) || Chart.helpers.getMaximumHeight(context.canvas);
|
||||
me.width = context.canvas.width || parseInt(helpers.getStyle(context.canvas, 'width'), 10) || helpers.getMaximumWidth(context.canvas);
|
||||
me.height = context.canvas.height || parseInt(helpers.getStyle(context.canvas, 'height'), 10) || helpers.getMaximumHeight(context.canvas);
|
||||
|
||||
this.aspectRatio = this.width / this.height;
|
||||
me.aspectRatio = me.width / me.height;
|
||||
|
||||
if (isNaN(this.aspectRatio) || isFinite(this.aspectRatio) === false) {
|
||||
if (isNaN(me.aspectRatio) || isFinite(me.aspectRatio) === false) {
|
||||
// If the canvas has no size, try and figure out what the aspect ratio will be.
|
||||
// Some charts prefer square canvases (pie, radar, etc). If that is specified, use that
|
||||
// else use the canvas default ratio of 2
|
||||
this.aspectRatio = config.aspectRatio !== undefined ? config.aspectRatio : 2;
|
||||
me.aspectRatio = config.aspectRatio !== undefined ? config.aspectRatio : 2;
|
||||
}
|
||||
|
||||
// Store the original style of the element so we can set it back
|
||||
this.originalCanvasStyleWidth = context.canvas.style.width;
|
||||
this.originalCanvasStyleHeight = context.canvas.style.height;
|
||||
me.originalCanvasStyleWidth = context.canvas.style.width;
|
||||
me.originalCanvasStyleHeight = context.canvas.style.height;
|
||||
|
||||
// High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
|
||||
Chart.helpers.retinaScale(this);
|
||||
helpers.retinaScale(me);
|
||||
|
||||
if (config) {
|
||||
this.controller = new Chart.Controller(this);
|
||||
me.controller = new Chart.Controller(me);
|
||||
}
|
||||
|
||||
// Always bind this so that if the responsive state changes we still work
|
||||
var _this = this;
|
||||
Chart.helpers.addResizeListener(context.canvas.parentNode, function() {
|
||||
if (_this.controller && _this.controller.config.options.responsive) {
|
||||
_this.controller.resize();
|
||||
helpers.addResizeListener(context.canvas.parentNode, function() {
|
||||
if (me.controller && me.controller.config.options.responsive) {
|
||||
me.controller.resize();
|
||||
}
|
||||
});
|
||||
|
||||
return this.controller ? this.controller : this;
|
||||
return me.controller ? me.controller : me;
|
||||
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user