mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00:00
More perf and minification changes based on feedback
This commit is contained in:
Blake Niemyjski
parent
7e85245e4f
commit
a3d75d2087
@ -97,7 +97,7 @@ module.exports = function(Chart) {
|
||||
}
|
||||
|
||||
var rectangleElementOptions = this.chart.options.elements.rectangle;
|
||||
var custom = rectangle.custom;
|
||||
var custom = rectangle.custom || {};
|
||||
var dataset = this.getDataset();
|
||||
|
||||
helpers.extend(rectangle, {
|
||||
@ -121,10 +121,10 @@ module.exports = function(Chart) {
|
||||
// Appearance
|
||||
base: reset ? yScalePoint : this.calculateBarBase(this.index, index),
|
||||
width: this.calculateBarWidth(numBars),
|
||||
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)
|
||||
backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor),
|
||||
borderSkipped: custom.borderSkipped ? custom.borderSkipped : rectangleElementOptions.borderSkipped,
|
||||
borderColor: custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor),
|
||||
borderWidth: custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth)
|
||||
}
|
||||
});
|
||||
rectangle.pivot();
|
||||
@ -304,23 +304,23 @@ module.exports = function(Chart) {
|
||||
var dataset = this.chart.data.datasets[rectangle._datasetIndex];
|
||||
var index = rectangle._index;
|
||||
|
||||
var custom = rectangle.custom;
|
||||
var custom = rectangle.custom || {};
|
||||
var model = rectangle._model;
|
||||
model.backgroundColor = custom && custom.hoverBackgroundColor ? custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(model.backgroundColor));
|
||||
model.borderColor = custom && custom.hoverBorderColor ? custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(model.borderColor));
|
||||
model.borderWidth = custom && custom.hoverBorderWidth ? custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, model.borderWidth);
|
||||
model.backgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(model.backgroundColor));
|
||||
model.borderColor = custom.hoverBorderColor ? custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(model.borderColor));
|
||||
model.borderWidth = custom.hoverBorderWidth ? custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, model.borderWidth);
|
||||
},
|
||||
|
||||
removeHoverStyle: function(rectangle) {
|
||||
var dataset = this.chart.data.datasets[rectangle._datasetIndex];
|
||||
var index = rectangle._index;
|
||||
var custom = rectangle.custom;
|
||||
var custom = rectangle.custom || {};
|
||||
var model = rectangle._model;
|
||||
var rectangleElementOptions = this.chart.options.elements.rectangle;
|
||||
|
||||
model.backgroundColor = custom && custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor);
|
||||
model.borderColor = custom && custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor);
|
||||
model.borderWidth = custom && custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth);
|
||||
model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor);
|
||||
model.borderColor = custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor);
|
||||
model.borderWidth = custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth);
|
||||
}
|
||||
|
||||
});
|
||||
@ -398,7 +398,7 @@ module.exports = function(Chart) {
|
||||
xScalePoint = xScale.getPixelForValue(0);
|
||||
}
|
||||
|
||||
var custom = rectangle.custom;
|
||||
var custom = rectangle.custom || {};
|
||||
var dataset = this.getDataset();
|
||||
var rectangleElementOptions = this.chart.options.elements.rectangle;
|
||||
helpers.extend(rectangle, {
|
||||
@ -421,10 +421,10 @@ module.exports = function(Chart) {
|
||||
// Appearance
|
||||
base: reset ? xScalePoint : this.calculateBarBase(this.index, index),
|
||||
height: this.calculateBarHeight(numBars),
|
||||
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)
|
||||
backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor),
|
||||
borderSkipped: custom.borderSkipped ? custom.borderSkipped : rectangleElementOptions.borderSkipped,
|
||||
borderColor: custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor),
|
||||
borderWidth: custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth)
|
||||
},
|
||||
|
||||
draw: function () {
|
||||
|
||||
@ -89,6 +89,11 @@ module.exports = function(Chart) {
|
||||
var xScale = this.getScaleForId(meta.xAxisID);
|
||||
var scaleBase;
|
||||
|
||||
var custom = point.custom || {};
|
||||
var dataset = this.getDataset();
|
||||
var data = dataset.data[index];
|
||||
var pointElementOptions = this.chart.options.elements.point;
|
||||
|
||||
if (yScale.min < 0 && yScale.max < 0) {
|
||||
scaleBase = yScale.getPixelForValue(yScale.max);
|
||||
} else if (yScale.min > 0 && yScale.max > 0) {
|
||||
@ -107,20 +112,21 @@ module.exports = function(Chart) {
|
||||
|
||||
// Desired view properties
|
||||
_model: {
|
||||
x: reset ? xScale.getPixelForDecimal(0.5) : xScale.getPixelForValue(this.getDataset().data[index], index, this.index, this.chart.isCombo),
|
||||
y: reset ? scaleBase : yScale.getPixelForValue(this.getDataset().data[index], index, this.index),
|
||||
x: reset ? xScale.getPixelForDecimal(0.5) : xScale.getPixelForValue(data, index, this.index, this.chart.isCombo),
|
||||
y: reset ? scaleBase : yScale.getPixelForValue(data, index, this.index),
|
||||
// Appearance
|
||||
radius: reset ? 0 : point.custom && point.custom.radius ? point.custom.radius : this.getRadius(this.getDataset().data[index]),
|
||||
backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.point.backgroundColor),
|
||||
borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.point.borderColor),
|
||||
borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.point.borderWidth),
|
||||
radius: reset ? 0 : custom.radius ? custom.radius : this.getRadius(data),
|
||||
backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, pointElementOptions.backgroundColor),
|
||||
borderColor: custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, pointElementOptions.borderColor),
|
||||
borderWidth: custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, pointElementOptions.borderWidth),
|
||||
|
||||
// Tooltip
|
||||
hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius)
|
||||
hitRadius: custom.hitRadius ? custom.hitRadius : helpers.getValueAtIndexOrDefault(dataset.hitRadius, index, pointElementOptions.hitRadius)
|
||||
}
|
||||
});
|
||||
|
||||
point._model.skip = point.custom && point.custom.skip ? point.custom.skip : (isNaN(point._model.x) || isNaN(point._model.y));
|
||||
var model = point._model;
|
||||
model.skip = custom.skip ? custom.skip : (isNaN(model.x) || isNaN(model.y));
|
||||
|
||||
point.pivot();
|
||||
},
|
||||
@ -144,21 +150,26 @@ module.exports = function(Chart) {
|
||||
// Point
|
||||
var dataset = this.chart.data.datasets[point._datasetIndex];
|
||||
var index = point._index;
|
||||
var custom = point.custom || {};
|
||||
var model = point._model;
|
||||
|
||||
point._model.radius = point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : (helpers.getValueAtIndexOrDefault(dataset.hoverRadius, index, this.chart.options.elements.point.hoverRadius)) + this.getRadius(this.getDataset().data[point._index]);
|
||||
point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(point._model.backgroundColor));
|
||||
point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(point._model.borderColor));
|
||||
point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, point._model.borderWidth);
|
||||
model.radius = custom.hoverRadius ? custom.hoverRadius : (helpers.getValueAtIndexOrDefault(dataset.hoverRadius, index, this.chart.options.elements.point.hoverRadius)) + this.getRadius(this.getDataset().data[point._index]);
|
||||
model.backgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(model.backgroundColor));
|
||||
model.borderColor = custom.hoverBorderColor ? custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(model.borderColor));
|
||||
model.borderWidth = custom.hoverBorderWidth ? custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, model.borderWidth);
|
||||
},
|
||||
|
||||
removeHoverStyle: function(point) {
|
||||
var dataset = this.chart.data.datasets[point._datasetIndex];
|
||||
var index = point._index;
|
||||
var custom = point.custom || {};
|
||||
var model = point._model;
|
||||
var pointElementOptions = this.chart.options.elements.point;
|
||||
|
||||
point._model.radius = point.custom && point.custom.radius ? point.custom.radius : this.getRadius(this.getDataset().data[point._index]);
|
||||
point._model.backgroundColor = point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.point.backgroundColor);
|
||||
point._model.borderColor = point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.point.borderColor);
|
||||
point._model.borderWidth = point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.point.borderWidth);
|
||||
model.radius = custom.radius ? custom.radius : this.getRadius(dataset.data[point._index]);
|
||||
model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, pointElementOptions.backgroundColor);
|
||||
model.borderColor = custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, pointElementOptions.borderColor);
|
||||
model.borderWidth = custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, pointElementOptions.borderWidth);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -46,12 +46,12 @@ module.exports = function(Chart) {
|
||||
var meta = chart.getDatasetMeta(0);
|
||||
var ds = data.datasets[0];
|
||||
var arc = meta.data[i];
|
||||
var custom = arc.custom;
|
||||
var custom = arc.custom || {};
|
||||
var getValueAtIndexOrDefault = helpers.getValueAtIndexOrDefault;
|
||||
var arcOpts = chart.options.elements.arc;
|
||||
var fill = custom && custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
|
||||
var stroke = custom && custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
|
||||
var bw = custom && custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
|
||||
var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
|
||||
var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
|
||||
var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
|
||||
|
||||
return {
|
||||
text: label,
|
||||
@ -170,7 +170,7 @@ module.exports = function(Chart) {
|
||||
availableHeight = chartArea.bottom - chartArea.top - arcOpts.borderWidth,
|
||||
minSize = Math.min(availableWidth, availableHeight),
|
||||
offset = {
|
||||
x: 0,
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
meta = _this.getMeta(),
|
||||
@ -227,7 +227,7 @@ module.exports = function(Chart) {
|
||||
circumference = reset && animationOpts.animateRotate ? 0 : arc.hidden ? 0 : _this.calculateCircumference(dataset.data[index]) * (opts.circumference / (2.0 * Math.PI)),
|
||||
innerRadius = reset && animationOpts.animateScale ? 0 : _this.innerRadius,
|
||||
outerRadius = reset && animationOpts.animateScale ? 0 : _this.outerRadius,
|
||||
custom = arc.custom,
|
||||
custom = arc.custom || {},
|
||||
valueAtIndexOrDefault = helpers.getValueAtIndexOrDefault;
|
||||
|
||||
helpers.extend(arc, {
|
||||
@ -250,10 +250,10 @@ module.exports = function(Chart) {
|
||||
});
|
||||
|
||||
var model = arc._model;
|
||||
model.backgroundColor = custom && custom.backgroundColor ? custom.backgroundColor : valueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor);
|
||||
model.hoverBackgroundColor = custom && custom.hoverBackgroundColor ? custom.hoverBackgroundColor : valueAtIndexOrDefault(dataset.hoverBackgroundColor, index, arcOpts.hoverBackgroundColor);
|
||||
model.borderWidth = custom && custom.borderWidth ? custom.borderWidth : valueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth);
|
||||
model.borderColor = custom && custom.borderColor ? custom.borderColor : valueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor);
|
||||
model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : valueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor);
|
||||
model.hoverBackgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : valueAtIndexOrDefault(dataset.hoverBackgroundColor, index, arcOpts.hoverBackgroundColor);
|
||||
model.borderWidth = custom.borderWidth ? custom.borderWidth : valueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth);
|
||||
model.borderColor = custom.borderColor ? custom.borderColor : valueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor);
|
||||
|
||||
// Set correct angles if not resetting
|
||||
if (!reset || !animationOpts.animateRotate) {
|
||||
|
||||
@ -61,6 +61,7 @@ module.exports = function(Chart) {
|
||||
update: function update(reset) {
|
||||
var meta = this.getMeta();
|
||||
var line = meta.dataset;
|
||||
var lineElementOptions = this.chart.options.elements.line;
|
||||
var points = meta.data;
|
||||
|
||||
var yScale = this.getScaleForId(meta.yAxisID);
|
||||
@ -84,23 +85,24 @@ module.exports = function(Chart) {
|
||||
line._children = points;
|
||||
// Model
|
||||
|
||||
var dataset = this.getDataset();
|
||||
var custom = line.custom || {};
|
||||
// Compatibility: If the properties are defined with only the old name, use those values
|
||||
if ((this.getDataset().tension !== undefined) && (this.getDataset().lineTension === undefined))
|
||||
{
|
||||
this.getDataset().lineTension = this.getDataset().tension;
|
||||
if ((dataset.tension !== undefined) && (dataset.lineTension === undefined)) {
|
||||
dataset.lineTension = dataset.tension;
|
||||
}
|
||||
|
||||
line._model = {
|
||||
// Appearance
|
||||
tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().lineTension, this.chart.options.elements.line.tension),
|
||||
backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor),
|
||||
borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth),
|
||||
borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor),
|
||||
borderCapStyle: line.custom && line.custom.borderCapStyle ? line.custom.borderCapStyle : (this.getDataset().borderCapStyle || this.chart.options.elements.line.borderCapStyle),
|
||||
borderDash: line.custom && line.custom.borderDash ? line.custom.borderDash : (this.getDataset().borderDash || this.chart.options.elements.line.borderDash),
|
||||
borderDashOffset: line.custom && line.custom.borderDashOffset ? line.custom.borderDashOffset : (this.getDataset().borderDashOffset || this.chart.options.elements.line.borderDashOffset),
|
||||
borderJoinStyle: line.custom && line.custom.borderJoinStyle ? line.custom.borderJoinStyle : (this.getDataset().borderJoinStyle || this.chart.options.elements.line.borderJoinStyle),
|
||||
fill: line.custom && line.custom.fill ? line.custom.fill : (this.getDataset().fill !== undefined ? this.getDataset().fill : this.chart.options.elements.line.fill),
|
||||
tension: custom.tension ? custom.tension : helpers.getValueOrDefault(dataset.lineTension, lineElementOptions.tension),
|
||||
backgroundColor: custom.backgroundColor ? custom.backgroundColor : (dataset.backgroundColor || lineElementOptions.backgroundColor),
|
||||
borderWidth: custom.borderWidth ? custom.borderWidth : (dataset.borderWidth || lineElementOptions.borderWidth),
|
||||
borderColor: custom.borderColor ? custom.borderColor : (dataset.borderColor || lineElementOptions.borderColor),
|
||||
borderCapStyle: custom.borderCapStyle ? custom.borderCapStyle : (dataset.borderCapStyle || lineElementOptions.borderCapStyle),
|
||||
borderDash: custom.borderDash ? custom.borderDash : (dataset.borderDash || lineElementOptions.borderDash),
|
||||
borderDashOffset: custom.borderDashOffset ? custom.borderDashOffset : (dataset.borderDashOffset || lineElementOptions.borderDashOffset),
|
||||
borderJoinStyle: custom.borderJoinStyle ? custom.borderJoinStyle : (dataset.borderJoinStyle || lineElementOptions.borderJoinStyle),
|
||||
fill: custom.fill ? custom.fill : (dataset.fill !== undefined ? dataset.fill : lineElementOptions.fill),
|
||||
// Scale
|
||||
scaleTop: yScale.top,
|
||||
scaleBottom: yScale.bottom,
|
||||
@ -114,16 +116,18 @@ module.exports = function(Chart) {
|
||||
this.updateElement(point, index, reset);
|
||||
}, this);
|
||||
|
||||
if (this.chart.options.showLines && this.chart.options.elements.line.tension !== 0)
|
||||
if (this.chart.options.showLines && lineElementOptions.tension !== 0) {
|
||||
this.updateBezierControlPoints();
|
||||
}
|
||||
},
|
||||
|
||||
getPointBackgroundColor: function(point, index) {
|
||||
var backgroundColor = this.chart.options.elements.point.backgroundColor;
|
||||
var dataset = this.getDataset();
|
||||
var custom = point.custom || {};
|
||||
|
||||
if (point.custom && point.custom.backgroundColor) {
|
||||
backgroundColor = point.custom.backgroundColor;
|
||||
if (custom.backgroundColor) {
|
||||
backgroundColor = custom.backgroundColor;
|
||||
} else if (dataset.pointBackgroundColor) {
|
||||
backgroundColor = helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, backgroundColor);
|
||||
} else if (dataset.backgroundColor) {
|
||||
@ -135,11 +139,12 @@ module.exports = function(Chart) {
|
||||
getPointBorderColor: function(point, index) {
|
||||
var borderColor = this.chart.options.elements.point.borderColor;
|
||||
var dataset = this.getDataset();
|
||||
var custom = point.custom || {};
|
||||
|
||||
if (point.custom && point.custom.borderColor) {
|
||||
borderColor = point.custom.borderColor;
|
||||
if (custom.borderColor) {
|
||||
borderColor = custom.borderColor;
|
||||
} else if (dataset.pointBorderColor) {
|
||||
borderColor = helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, borderColor);
|
||||
borderColor = helpers.getValueAtIndexOrDefault(dataset.pointBorderColor, index, borderColor);
|
||||
} else if (dataset.borderColor) {
|
||||
borderColor = dataset.borderColor;
|
||||
}
|
||||
@ -149,12 +154,13 @@ module.exports = function(Chart) {
|
||||
getPointBorderWidth: function(point, index) {
|
||||
var borderWidth = this.chart.options.elements.point.borderWidth;
|
||||
var dataset = this.getDataset();
|
||||
var custom = point.custom || {};
|
||||
|
||||
if (point.custom && point.custom.borderWidth !== undefined) {
|
||||
borderWidth = point.custom.borderWidth;
|
||||
} else if (dataset.pointBorderWidth !== undefined) {
|
||||
if (custom.borderWidth) {
|
||||
borderWidth = custom.borderWidth;
|
||||
} else if (dataset.pointBorderWidth) {
|
||||
borderWidth = helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, borderWidth);
|
||||
} else if (dataset.borderWidth !== undefined) {
|
||||
} else if (dataset.borderWidth) {
|
||||
borderWidth = dataset.borderWidth;
|
||||
}
|
||||
|
||||
@ -163,6 +169,8 @@ module.exports = function(Chart) {
|
||||
|
||||
updateElement: function(point, index, reset) {
|
||||
var meta = this.getMeta();
|
||||
var custom = point.custom || {};
|
||||
var dataset = this.getDataset();
|
||||
var yScale = this.getScaleForId(meta.yAxisID);
|
||||
var xScale = this.getScaleForId(meta.xAxisID);
|
||||
var scaleBase;
|
||||
@ -185,30 +193,30 @@ module.exports = function(Chart) {
|
||||
// Desired view properties
|
||||
|
||||
// Compatibility: If the properties are defined with only the old name, use those values
|
||||
if ((this.getDataset().radius !== undefined) && (this.getDataset().pointRadius === undefined))
|
||||
if ((dataset.radius !== undefined) && (dataset.pointRadius === undefined))
|
||||
{
|
||||
this.getDataset().pointRadius = this.getDataset().radius;
|
||||
dataset.pointRadius = dataset.radius;
|
||||
}
|
||||
if ((this.getDataset().hitRadius !== undefined) && (this.getDataset().pointHitRadius === undefined))
|
||||
if ((dataset.hitRadius !== undefined) && (dataset.pointHitRadius === undefined))
|
||||
{
|
||||
this.getDataset().pointHitRadius = this.getDataset().hitRadius;
|
||||
dataset.pointHitRadius = dataset.hitRadius;
|
||||
}
|
||||
|
||||
point._model = {
|
||||
x: xScale.getPixelForValue(this.getDataset().data[index], index, this.index, this.chart.isCombo),
|
||||
y: reset ? scaleBase : this.calculatePointY(this.getDataset().data[index], index, this.index, this.chart.isCombo),
|
||||
x: xScale.getPixelForValue(dataset.data[index], index, this.index, this.chart.isCombo),
|
||||
y: reset ? scaleBase : this.calculatePointY(dataset.data[index], index, this.index, this.chart.isCombo),
|
||||
// Appearance
|
||||
radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().pointRadius, index, this.chart.options.elements.point.radius),
|
||||
pointStyle: point.custom && point.custom.pointStyle ? point.custom.pointStyle : helpers.getValueAtIndexOrDefault(this.getDataset().pointStyle, index, this.chart.options.elements.point.pointStyle),
|
||||
radius: custom.radius ? custom.radius : helpers.getValueAtIndexOrDefault(dataset.pointRadius, index, this.chart.options.elements.point.radius),
|
||||
pointStyle: custom.pointStyle ? custom.pointStyle : helpers.getValueAtIndexOrDefault(dataset.pointStyle, index, this.chart.options.elements.point.pointStyle),
|
||||
backgroundColor: this.getPointBackgroundColor(point, index),
|
||||
borderColor: this.getPointBorderColor(point, index),
|
||||
borderWidth: this.getPointBorderWidth(point, index),
|
||||
tension: meta.dataset._model ? meta.dataset._model.tension : 0,
|
||||
// Tooltip
|
||||
hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().pointHitRadius, index, this.chart.options.elements.point.hitRadius)
|
||||
hitRadius: custom.hitRadius ? custom.hitRadius : helpers.getValueAtIndexOrDefault(dataset.pointHitRadius, index, this.chart.options.elements.point.hitRadius)
|
||||
};
|
||||
|
||||
point._model.skip = point.custom && point.custom.skip ? point.custom.skip : (isNaN(point._model.x) || isNaN(point._model.y));
|
||||
point._model.skip = custom.skip ? custom.skip : (isNaN(point._model.x) || isNaN(point._model.y));
|
||||
},
|
||||
|
||||
calculatePointY: function(value, index, datasetIndex, isCombo) {
|
||||
@ -289,27 +297,31 @@ module.exports = function(Chart) {
|
||||
// Point
|
||||
var dataset = this.chart.data.datasets[point._datasetIndex];
|
||||
var index = point._index;
|
||||
var custom = point.custom || {};
|
||||
var model = point._model;
|
||||
|
||||
point._model.radius = point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius);
|
||||
point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.getHoverColor(point._model.backgroundColor));
|
||||
point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.getHoverColor(point._model.borderColor));
|
||||
point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderWidth, index, point._model.borderWidth);
|
||||
model.radius = custom.hoverRadius ? custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius);
|
||||
model.backgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.getHoverColor(model.backgroundColor));
|
||||
model.borderColor = custom.hoverBorderColor ? custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.getHoverColor(model.borderColor));
|
||||
model.borderWidth = custom.hoverBorderWidth ? custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderWidth, index, model.borderWidth);
|
||||
},
|
||||
|
||||
removeHoverStyle: function(point) {
|
||||
var dataset = this.chart.data.datasets[point._datasetIndex];
|
||||
var index = point._index;
|
||||
var custom = point.custom || {};
|
||||
var model = point._model;
|
||||
|
||||
// Compatibility: If the properties are defined with only the old name, use those values
|
||||
if ((this.getDataset().radius !== undefined) && (this.getDataset().pointRadius === undefined))
|
||||
if ((dataset.radius !== undefined) && (dataset.pointRadius === undefined))
|
||||
{
|
||||
this.getDataset().pointRadius = this.getDataset().radius;
|
||||
dataset.pointRadius = dataset.radius;
|
||||
}
|
||||
|
||||
point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().pointRadius, index, this.chart.options.elements.point.radius);
|
||||
point._model.backgroundColor = this.getPointBackgroundColor(point, index);
|
||||
point._model.borderColor = this.getPointBorderColor(point, index);
|
||||
point._model.borderWidth = this.getPointBorderWidth(point, index);
|
||||
model.radius = custom.radius ? custom.radius : helpers.getValueAtIndexOrDefault(dataset.pointRadius, index, this.chart.options.elements.point.radius);
|
||||
model.backgroundColor = this.getPointBackgroundColor(point, index);
|
||||
model.borderColor = this.getPointBorderColor(point, index);
|
||||
model.borderWidth = this.getPointBorderWidth(point, index);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -48,12 +48,12 @@ module.exports = function(Chart) {
|
||||
var meta = chart.getDatasetMeta(0);
|
||||
var ds = data.datasets[0];
|
||||
var arc = meta.data[i];
|
||||
var custom = arc.custom;
|
||||
var custom = arc.custom || {};
|
||||
var getValueAtIndexOrDefault = helpers.getValueAtIndexOrDefault;
|
||||
var arcOpts = chart.options.elements.arc;
|
||||
var fill = custom && custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
|
||||
var stroke = custom && custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
|
||||
var bw = custom && custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
|
||||
var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
|
||||
var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
|
||||
var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
|
||||
|
||||
return {
|
||||
text: label,
|
||||
@ -158,7 +158,7 @@ module.exports = function(Chart) {
|
||||
var opts = chart.options;
|
||||
var animationOpts = opts.animation;
|
||||
var arcOpts = opts.elements.arc;
|
||||
var custom = arc.custom;
|
||||
var custom = arc.custom || {};
|
||||
var scale = chart.scale;
|
||||
var getValueAtIndexOrDefault = helpers.getValueAtIndexOrDefault;
|
||||
var labels = chart.data.labels;
|
||||
@ -189,9 +189,9 @@ module.exports = function(Chart) {
|
||||
startAngle: animationOpts.animateRotate ? Math.PI * -0.5 : startAngle,
|
||||
endAngle: animationOpts.animateRotate ? Math.PI * -0.5 : endAngle,
|
||||
|
||||
backgroundColor: custom && custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor),
|
||||
borderWidth: custom && custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth),
|
||||
borderColor: custom && custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor),
|
||||
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])
|
||||
};
|
||||
@ -212,9 +212,9 @@ module.exports = function(Chart) {
|
||||
startAngle: startAngle,
|
||||
endAngle: endAngle,
|
||||
|
||||
backgroundColor: custom && custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor),
|
||||
borderWidth: custom && custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth),
|
||||
borderColor: custom && custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor),
|
||||
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])
|
||||
}
|
||||
|
||||
@ -62,6 +62,9 @@ module.exports = function(Chart) {
|
||||
var meta = this.getMeta();
|
||||
var line = meta.dataset;
|
||||
var points = meta.data;
|
||||
var custom = line.custom || {};
|
||||
var dataset = this.getDataset();
|
||||
var lineElementOptions = this.chart.options.elements.line;
|
||||
|
||||
var scale = this.chart.scale;
|
||||
var scaleBase;
|
||||
@ -75,9 +78,9 @@ module.exports = function(Chart) {
|
||||
}
|
||||
|
||||
// Compatibility: If the properties are defined with only the old name, use those values
|
||||
if ((this.getDataset().tension !== undefined) && (this.getDataset().lineTension === undefined))
|
||||
if ((dataset.tension !== undefined) && (dataset.lineTension === undefined))
|
||||
{
|
||||
this.getDataset().lineTension = this.getDataset().tension;
|
||||
dataset.lineTension = dataset.tension;
|
||||
}
|
||||
|
||||
helpers.extend(meta.dataset, {
|
||||
@ -88,15 +91,15 @@ module.exports = function(Chart) {
|
||||
// Model
|
||||
_model: {
|
||||
// Appearance
|
||||
tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().lineTension, this.chart.options.elements.line.tension),
|
||||
backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor),
|
||||
borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth),
|
||||
borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor),
|
||||
fill: line.custom && line.custom.fill ? line.custom.fill : (this.getDataset().fill !== undefined ? this.getDataset().fill : this.chart.options.elements.line.fill),
|
||||
borderCapStyle: line.custom && line.custom.borderCapStyle ? line.custom.borderCapStyle : (this.getDataset().borderCapStyle || this.chart.options.elements.line.borderCapStyle),
|
||||
borderDash: line.custom && line.custom.borderDash ? line.custom.borderDash : (this.getDataset().borderDash || this.chart.options.elements.line.borderDash),
|
||||
borderDashOffset: line.custom && line.custom.borderDashOffset ? line.custom.borderDashOffset : (this.getDataset().borderDashOffset || this.chart.options.elements.line.borderDashOffset),
|
||||
borderJoinStyle: line.custom && line.custom.borderJoinStyle ? line.custom.borderJoinStyle : (this.getDataset().borderJoinStyle || this.chart.options.elements.line.borderJoinStyle),
|
||||
tension: custom.tension ? custom.tension : helpers.getValueOrDefault(dataset.lineTension, lineElementOptions.tension),
|
||||
backgroundColor: custom.backgroundColor ? custom.backgroundColor : (dataset.backgroundColor || lineElementOptions.backgroundColor),
|
||||
borderWidth: custom.borderWidth ? custom.borderWidth : (dataset.borderWidth || lineElementOptions.borderWidth),
|
||||
borderColor: custom.borderColor ? custom.borderColor : (dataset.borderColor || lineElementOptions.borderColor),
|
||||
fill: custom.fill ? custom.fill : (dataset.fill !== undefined ? dataset.fill : lineElementOptions.fill),
|
||||
borderCapStyle: custom.borderCapStyle ? custom.borderCapStyle : (dataset.borderCapStyle || lineElementOptions.borderCapStyle),
|
||||
borderDash: custom.borderDash ? custom.borderDash : (dataset.borderDash || lineElementOptions.borderDash),
|
||||
borderDashOffset: custom.borderDashOffset ? custom.borderDashOffset : (dataset.borderDashOffset || lineElementOptions.borderDashOffset),
|
||||
borderJoinStyle: custom.borderJoinStyle ? custom.borderJoinStyle : (dataset.borderJoinStyle || lineElementOptions.borderJoinStyle),
|
||||
|
||||
// Scale
|
||||
scaleTop: scale.top,
|
||||
@ -117,50 +120,57 @@ module.exports = function(Chart) {
|
||||
this.updateBezierControlPoints();
|
||||
},
|
||||
updateElement: function(point, index, reset) {
|
||||
var pointPosition = this.chart.scale.getPointPositionForValue(index, this.getDataset().data[index]);
|
||||
var custom = point.custom || {};
|
||||
var dataset = this.getDataset();
|
||||
var scale = this.chart.scale;
|
||||
var pointElementOptions = this.chart.options.elements.point;
|
||||
var pointPosition = scale.getPointPositionForValue(index, dataset.data[index]);
|
||||
|
||||
helpers.extend(point, {
|
||||
// Utility
|
||||
_datasetIndex: this.index,
|
||||
_index: index,
|
||||
_scale: this.chart.scale,
|
||||
_scale: scale,
|
||||
|
||||
// Desired view properties
|
||||
_model: {
|
||||
x: reset ? this.chart.scale.xCenter : pointPosition.x, // value not used in dataset scale, but we want a consistent API between scales
|
||||
y: reset ? this.chart.scale.yCenter : pointPosition.y,
|
||||
x: reset ? scale.xCenter : pointPosition.x, // value not used in dataset scale, but we want a consistent API between scales
|
||||
y: reset ? scale.yCenter : pointPosition.y,
|
||||
|
||||
// Appearance
|
||||
tension: point.custom && point.custom.tension ? point.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
|
||||
radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().pointRadius, index, this.chart.options.elements.point.radius),
|
||||
backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBackgroundColor, index, this.chart.options.elements.point.backgroundColor),
|
||||
borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, this.chart.options.elements.point.borderColor),
|
||||
borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth),
|
||||
pointStyle: point.custom && point.custom.pointStyle ? point.custom.pointStyle : helpers.getValueAtIndexOrDefault(this.getDataset().pointStyle, index, this.chart.options.elements.point.pointStyle),
|
||||
tension: custom.tension ? custom.tension : helpers.getValueOrDefault(dataset.tension, this.chart.options.elements.line.tension),
|
||||
radius: custom.radius ? custom.radius : helpers.getValueAtIndexOrDefault(dataset.pointRadius, index, pointElementOptions.radius),
|
||||
backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, pointElementOptions.backgroundColor),
|
||||
borderColor: custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.pointBorderColor, index, pointElementOptions.borderColor),
|
||||
borderWidth: custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, pointElementOptions.borderWidth),
|
||||
pointStyle: custom.pointStyle ? custom.pointStyle : helpers.getValueAtIndexOrDefault(dataset.pointStyle, index, pointElementOptions.pointStyle),
|
||||
|
||||
// Tooltip
|
||||
hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius)
|
||||
hitRadius: custom.hitRadius ? custom.hitRadius : helpers.getValueAtIndexOrDefault(dataset.hitRadius, index, pointElementOptions.hitRadius)
|
||||
}
|
||||
});
|
||||
|
||||
point._model.skip = point.custom && point.custom.skip ? point.custom.skip : (isNaN(point._model.x) || isNaN(point._model.y));
|
||||
point._model.skip = custom.skip ? custom.skip : (isNaN(point._model.x) || isNaN(point._model.y));
|
||||
},
|
||||
updateBezierControlPoints: function() {
|
||||
var chartArea = this.chart.chartArea;
|
||||
var meta = this.getMeta();
|
||||
|
||||
helpers.each(meta.data, function(point, index) {
|
||||
var model = point._model;
|
||||
var controlPoints = helpers.splineCurve(
|
||||
helpers.previousItem(meta.data, index, true)._model,
|
||||
point._model,
|
||||
model,
|
||||
helpers.nextItem(meta.data, index, true)._model,
|
||||
point._model.tension
|
||||
model.tension
|
||||
);
|
||||
|
||||
// Prevent the bezier going outside of the bounds of the graph
|
||||
point._model.controlPointPreviousX = Math.max(Math.min(controlPoints.previous.x, this.chart.chartArea.right), this.chart.chartArea.left);
|
||||
point._model.controlPointPreviousY = Math.max(Math.min(controlPoints.previous.y, this.chart.chartArea.bottom), this.chart.chartArea.top);
|
||||
model.controlPointPreviousX = Math.max(Math.min(controlPoints.previous.x, chartArea.right), chartArea.left);
|
||||
model.controlPointPreviousY = Math.max(Math.min(controlPoints.previous.y, chartArea.bottom), chartArea.top);
|
||||
|
||||
point._model.controlPointNextX = Math.max(Math.min(controlPoints.next.x, this.chart.chartArea.right), this.chart.chartArea.left);
|
||||
point._model.controlPointNextY = Math.max(Math.min(controlPoints.next.y, this.chart.chartArea.bottom), this.chart.chartArea.top);
|
||||
model.controlPointNextX = Math.max(Math.min(controlPoints.next.x, chartArea.right), chartArea.left);
|
||||
model.controlPointNextY = Math.max(Math.min(controlPoints.next.y, chartArea.bottom), chartArea.top);
|
||||
|
||||
// Now pivot the point for animation
|
||||
point.pivot();
|
||||
@ -188,22 +198,27 @@ module.exports = function(Chart) {
|
||||
setHoverStyle: function(point) {
|
||||
// Point
|
||||
var dataset = this.chart.data.datasets[point._datasetIndex];
|
||||
var custom = point.custom || {};
|
||||
var index = point._index;
|
||||
var model = point._model;
|
||||
|
||||
point._model.radius = point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius);
|
||||
point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.getHoverColor(point._model.backgroundColor));
|
||||
point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.getHoverColor(point._model.borderColor));
|
||||
point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderWidth, index, point._model.borderWidth);
|
||||
model.radius = custom.hoverRadius ? custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius);
|
||||
model.backgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.getHoverColor(model.backgroundColor));
|
||||
model.borderColor = custom.hoverBorderColor ? custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.getHoverColor(model.borderColor));
|
||||
model.borderWidth = custom.hoverBorderWidth ? custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderWidth, index, model.borderWidth);
|
||||
},
|
||||
|
||||
removeHoverStyle: function(point) {
|
||||
var dataset = this.chart.data.datasets[point._datasetIndex];
|
||||
var custom = point.custom || {};
|
||||
var index = point._index;
|
||||
var model = point._model;
|
||||
var pointElementOptions = this.chart.options.elements.point;
|
||||
|
||||
point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius);
|
||||
point._model.backgroundColor = point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBackgroundColor, index, this.chart.options.elements.point.backgroundColor);
|
||||
point._model.borderColor = point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, this.chart.options.elements.point.borderColor);
|
||||
point._model.borderWidth = point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth);
|
||||
model.radius = custom.radius ? custom.radius : helpers.getValueAtIndexOrDefault(dataset.radius, index, pointElementOptions.radius);
|
||||
model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, pointElementOptions.backgroundColor);
|
||||
model.borderColor = custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.pointBorderColor, index, pointElementOptions.borderColor);
|
||||
model.borderWidth = custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, pointElementOptions.borderWidth);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -80,27 +80,27 @@ module.exports = function(Chart) {
|
||||
removeHoverStyle: function(element, elementOpts) {
|
||||
var dataset = this.chart.data.datasets[element._datasetIndex],
|
||||
index = element._index,
|
||||
custom = element.custom,
|
||||
custom = element.custom || {},
|
||||
valueOrDefault = helpers.getValueAtIndexOrDefault,
|
||||
color = helpers.color,
|
||||
model = element._model;
|
||||
|
||||
model.backgroundColor = custom && custom.backgroundColor ? custom.backgroundColor : valueOrDefault(dataset.backgroundColor, index, elementOpts.backgroundColor);
|
||||
model.borderColor = custom && custom.borderColor ? custom.borderColor : valueOrDefault(dataset.borderColor, index, elementOpts.borderColor);
|
||||
model.borderWidth = custom && custom.borderWidth ? custom.borderWidth : valueOrDefault(dataset.borderWidth, index, elementOpts.borderWidth);
|
||||
model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : valueOrDefault(dataset.backgroundColor, index, elementOpts.backgroundColor);
|
||||
model.borderColor = custom.borderColor ? custom.borderColor : valueOrDefault(dataset.borderColor, index, elementOpts.borderColor);
|
||||
model.borderWidth = custom.borderWidth ? custom.borderWidth : valueOrDefault(dataset.borderWidth, index, elementOpts.borderWidth);
|
||||
},
|
||||
setHoverStyle: function(element) {
|
||||
var dataset = this.chart.data.datasets[element._datasetIndex],
|
||||
index = element._index,
|
||||
custom = element.custom,
|
||||
custom = element.custom || {},
|
||||
valueOrDefault = helpers.getValueAtIndexOrDefault,
|
||||
color = helpers.color,
|
||||
getHoverColor = helpers.getHoverColor,
|
||||
model = element._model;
|
||||
|
||||
model.backgroundColor = custom && custom.hoverBackgroundColor ? custom.hoverBackgroundColor : valueOrDefault(dataset.hoverBackgroundColor, index, getHoverColor(model.backgroundColor));
|
||||
model.borderColor = custom && custom.hoverBorderColor ? custom.hoverBorderColor : valueOrDefault(dataset.hoverBorderColor, index, getHoverColor(model.borderColor));
|
||||
model.borderWidth = custom && custom.hoverBorderWidth ? custom.hoverBorderWidth : valueOrDefault(dataset.hoverBorderWidth, index, model.borderWidth);
|
||||
model.backgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : valueOrDefault(dataset.hoverBackgroundColor, index, getHoverColor(model.backgroundColor));
|
||||
model.borderColor = custom.hoverBorderColor ? custom.hoverBorderColor : valueOrDefault(dataset.hoverBorderColor, index, getHoverColor(model.borderColor));
|
||||
model.borderWidth = custom.hoverBorderWidth ? custom.hoverBorderWidth : valueOrDefault(dataset.hoverBorderWidth, index, model.borderWidth);
|
||||
},
|
||||
update: noop
|
||||
});
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
module.exports = function(Chart) {
|
||||
|
||||
var helpers = Chart.helpers;
|
||||
var globalDefaults = Chart.defaults.global;
|
||||
|
||||
Chart.defaults.scale = {
|
||||
display: true,
|
||||
@ -182,6 +181,7 @@ module.exports = function(Chart) {
|
||||
},
|
||||
calculateTickRotation: function() {
|
||||
var context = this.ctx;
|
||||
var globalDefaults = Chart.defaults.global;
|
||||
var optionTicks = this.options.ticks;
|
||||
|
||||
//Get the width of each grid by calculating the difference
|
||||
@ -453,262 +453,266 @@ module.exports = function(Chart) {
|
||||
// Actualy draw the scale on the canvas
|
||||
// @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 optionTicks = this.options.ticks;
|
||||
var gridLines = this.options.gridLines;
|
||||
var scaleLabel = this.options.scaleLabel;
|
||||
var options = this.options;
|
||||
if (!options.display) {
|
||||
return;
|
||||
}
|
||||
|
||||
var setContextLineSettings;
|
||||
var isRotated = this.labelRotation !== 0;
|
||||
var skipRatio;
|
||||
var scaleLabelX;
|
||||
var scaleLabelY;
|
||||
var useAutoskipper = optionTicks.autoSkip;
|
||||
var context = this.ctx;
|
||||
var globalDefaults = Chart.defaults.global;
|
||||
var optionTicks = options.ticks;
|
||||
var gridLines = options.gridLines;
|
||||
var scaleLabel = options.scaleLabel;
|
||||
|
||||
// figure out the maximum number of gridlines to show
|
||||
var maxTicks;
|
||||
if (optionTicks.maxTicksLimit) {
|
||||
maxTicks = optionTicks.maxTicksLimit;
|
||||
var setContextLineSettings;
|
||||
var isRotated = this.labelRotation !== 0;
|
||||
var skipRatio;
|
||||
var scaleLabelX;
|
||||
var scaleLabelY;
|
||||
var useAutoskipper = optionTicks.autoSkip;
|
||||
|
||||
// figure out the maximum number of gridlines to show
|
||||
var maxTicks;
|
||||
if (optionTicks.maxTicksLimit) {
|
||||
maxTicks = optionTicks.maxTicksLimit;
|
||||
}
|
||||
|
||||
var tickFontColor = helpers.getValueOrDefault(optionTicks.fontColor, globalDefaults.defaultFontColor);
|
||||
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);
|
||||
var tl = gridLines.tickMarkLength;
|
||||
|
||||
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 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
|
||||
context.fillStyle = tickFontColor;
|
||||
|
||||
if (this.isHorizontal()) {
|
||||
setContextLineSettings = true;
|
||||
var yTickStart = options.position === "bottom" ? this.top : this.bottom - tl;
|
||||
var yTickEnd = options.position === "bottom" ? this.top + tl : this.bottom;
|
||||
skipRatio = false;
|
||||
|
||||
if (((longestRotatedLabel / 2) + optionTicks.autoSkipPadding) * this.ticks.length > (this.width - (this.paddingLeft + this.paddingRight))) {
|
||||
skipRatio = 1 + Math.floor((((longestRotatedLabel / 2) + optionTicks.autoSkipPadding) * this.ticks.length) / (this.width - (this.paddingLeft + this.paddingRight)));
|
||||
}
|
||||
|
||||
var tickFontColor = helpers.getValueOrDefault(optionTicks.fontColor, globalDefaults.defaultFontColor);
|
||||
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);
|
||||
var tl = gridLines.tickMarkLength;
|
||||
// if they defined a max number of optionTicks,
|
||||
// increase skipRatio until that number is met
|
||||
if (maxTicks && this.ticks.length > maxTicks) {
|
||||
while (!skipRatio || this.ticks.length / (skipRatio || 1) > maxTicks) {
|
||||
if (!skipRatio) {
|
||||
skipRatio = 1;
|
||||
}
|
||||
skipRatio += 1;
|
||||
}
|
||||
}
|
||||
|
||||
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 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
|
||||
context.fillStyle = tickFontColor;
|
||||
|
||||
if (this.isHorizontal()) {
|
||||
setContextLineSettings = true;
|
||||
var yTickStart = this.options.position === "bottom" ? this.top : this.bottom - tl;
|
||||
var yTickEnd = this.options.position === "bottom" ? this.top + tl : this.bottom;
|
||||
if (!useAutoskipper) {
|
||||
skipRatio = false;
|
||||
}
|
||||
|
||||
if (((longestRotatedLabel / 2) + optionTicks.autoSkipPadding) * this.ticks.length > (this.width - (this.paddingLeft + this.paddingRight))) {
|
||||
skipRatio = 1 + Math.floor((((longestRotatedLabel / 2) + optionTicks.autoSkipPadding) * this.ticks.length) / (this.width - (this.paddingLeft + this.paddingRight)));
|
||||
helpers.each(this.ticks, function (label, index) {
|
||||
// Blank optionTicks
|
||||
var isLastTick = this.ticks.length === index + 1;
|
||||
|
||||
// Since we always show the last tick,we need may need to hide the last shown one before
|
||||
var shouldSkip = (skipRatio > 1 && index % skipRatio > 0) || (index % skipRatio === 0 && index + skipRatio > this.ticks.length);
|
||||
if (shouldSkip && !isLastTick || (label === undefined || label === null)) {
|
||||
return;
|
||||
}
|
||||
var xLineValue = this.getPixelForTick(index); // xvalues for grid lines
|
||||
var xLabelValue = this.getPixelForTick(index, gridLines.offsetGridLines); // x values for optionTicks (need to consider offsetLabel option)
|
||||
|
||||
if (gridLines.display) {
|
||||
if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) {
|
||||
// Draw the first index specially
|
||||
context.lineWidth = gridLines.zeroLineWidth;
|
||||
context.strokeStyle = gridLines.zeroLineColor;
|
||||
setContextLineSettings = true; // reset next time
|
||||
} else if (setContextLineSettings) {
|
||||
context.lineWidth = gridLines.lineWidth;
|
||||
context.strokeStyle = gridLines.color;
|
||||
setContextLineSettings = false;
|
||||
}
|
||||
|
||||
xLineValue += helpers.aliasPixel(context.lineWidth);
|
||||
|
||||
// Draw the label area
|
||||
context.beginPath();
|
||||
|
||||
if (gridLines.drawTicks) {
|
||||
context.moveTo(xLineValue, yTickStart);
|
||||
context.lineTo(xLineValue, yTickEnd);
|
||||
}
|
||||
|
||||
// Draw the chart area
|
||||
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
|
||||
context.stroke();
|
||||
}
|
||||
|
||||
// if they defined a max number of optionTicks,
|
||||
// increase skipRatio until that number is met
|
||||
if (maxTicks && this.ticks.length > maxTicks) {
|
||||
while (!skipRatio || this.ticks.length / (skipRatio || 1) > maxTicks) {
|
||||
if (!skipRatio) {
|
||||
skipRatio = 1;
|
||||
}
|
||||
skipRatio += 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (!useAutoskipper) {
|
||||
skipRatio = false;
|
||||
}
|
||||
|
||||
helpers.each(this.ticks, function(label, index) {
|
||||
// Blank optionTicks
|
||||
var isLastTick = this.ticks.length === index + 1;
|
||||
|
||||
// Since we always show the last tick,we need may need to hide the last shown one before
|
||||
var shouldSkip = (skipRatio > 1 && index % skipRatio > 0) || (index % skipRatio === 0 && index + skipRatio > this.ticks.length);
|
||||
if (shouldSkip && !isLastTick || (label === undefined || label === null)) {
|
||||
return;
|
||||
}
|
||||
var xLineValue = this.getPixelForTick(index); // xvalues for grid lines
|
||||
var xLabelValue = this.getPixelForTick(index, gridLines.offsetGridLines); // x values for optionTicks (need to consider offsetLabel option)
|
||||
|
||||
if (gridLines.display) {
|
||||
if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) {
|
||||
// Draw the first index specially
|
||||
context.lineWidth = gridLines.zeroLineWidth;
|
||||
context.strokeStyle = gridLines.zeroLineColor;
|
||||
setContextLineSettings = true; // reset next time
|
||||
} else if (setContextLineSettings) {
|
||||
context.lineWidth = gridLines.lineWidth;
|
||||
context.strokeStyle = gridLines.color;
|
||||
setContextLineSettings = false;
|
||||
}
|
||||
|
||||
xLineValue += helpers.aliasPixel(context.lineWidth);
|
||||
|
||||
// Draw the label area
|
||||
context.beginPath();
|
||||
|
||||
if (gridLines.drawTicks) {
|
||||
context.moveTo(xLineValue, yTickStart);
|
||||
context.lineTo(xLineValue, yTickEnd);
|
||||
}
|
||||
|
||||
// Draw the chart area
|
||||
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
|
||||
context.stroke();
|
||||
}
|
||||
|
||||
if (optionTicks.display) {
|
||||
context.save();
|
||||
context.translate(xLabelValue + optionTicks.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 (scaleLabel.display) {
|
||||
// Draw the scale label
|
||||
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);
|
||||
|
||||
context.fillText(scaleLabel.labelString, scaleLabelX, scaleLabelY);
|
||||
}
|
||||
|
||||
} else {
|
||||
setContextLineSettings = true;
|
||||
var xTickStart = this.options.position === "right" ? this.left : this.right - 5;
|
||||
var xTickEnd = this.options.position === "right" ? this.left + 5 : this.right;
|
||||
|
||||
helpers.each(this.ticks, function(label, index) {
|
||||
// If the callback returned a null or undefined value, do not draw this line
|
||||
if (label === undefined || label === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
var yLineValue = this.getPixelForTick(index); // xvalues for grid lines
|
||||
|
||||
if (gridLines.display) {
|
||||
if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) {
|
||||
// Draw the first index specially
|
||||
context.lineWidth = gridLines.zeroLineWidth;
|
||||
context.strokeStyle = gridLines.zeroLineColor;
|
||||
setContextLineSettings = true; // reset next time
|
||||
} else if (setContextLineSettings) {
|
||||
context.lineWidth = gridLines.lineWidth;
|
||||
context.strokeStyle = gridLines.color;
|
||||
setContextLineSettings = false;
|
||||
}
|
||||
|
||||
yLineValue += helpers.aliasPixel(context.lineWidth);
|
||||
|
||||
// Draw the label area
|
||||
context.beginPath();
|
||||
|
||||
if (gridLines.drawTicks) {
|
||||
context.moveTo(xTickStart, yLineValue);
|
||||
context.lineTo(xTickEnd, yLineValue);
|
||||
}
|
||||
|
||||
// Draw the chart area
|
||||
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
|
||||
context.stroke();
|
||||
}
|
||||
|
||||
if (optionTicks.display) {
|
||||
var xLabelValue;
|
||||
var yLabelValue = this.getPixelForTick(index, gridLines.offsetGridLines); // x values for optionTicks (need to consider offsetLabel option)
|
||||
|
||||
context.save();
|
||||
|
||||
if (this.options.position === "left") {
|
||||
if (optionTicks.mirror) {
|
||||
xLabelValue = this.right + optionTicks.padding;
|
||||
context.textAlign = "left";
|
||||
} else {
|
||||
xLabelValue = this.right - optionTicks.padding;
|
||||
context.textAlign = "right";
|
||||
}
|
||||
} else {
|
||||
// right side
|
||||
if (optionTicks.mirror) {
|
||||
xLabelValue = this.left - optionTicks.padding;
|
||||
context.textAlign = "right";
|
||||
} else {
|
||||
xLabelValue = this.left + optionTicks.padding;
|
||||
context.textAlign = "left";
|
||||
}
|
||||
}
|
||||
|
||||
context.translate(xLabelValue, yLabelValue + optionTicks.labelOffset);
|
||||
context.rotate(labelRotationRadians * -1);
|
||||
context.font = tickLabelFont;
|
||||
context.textBaseline = "middle";
|
||||
context.fillText(label, 0, 0);
|
||||
context.restore();
|
||||
}
|
||||
}, this);
|
||||
|
||||
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;
|
||||
|
||||
if (optionTicks.display) {
|
||||
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.translate(xLabelValue + optionTicks.labelOffset, (isRotated) ? this.top + 12 : 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" : options.position === "top" ? "bottom" : "top";
|
||||
context.fillText(label, 0, 0);
|
||||
context.restore();
|
||||
}
|
||||
}, this);
|
||||
|
||||
if (scaleLabel.display) {
|
||||
// Draw the scale label
|
||||
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 = options.position === 'bottom' ? this.bottom - (scaleLabelFontSize / 2) : this.top + (scaleLabelFontSize / 2);
|
||||
|
||||
context.fillText(scaleLabel.labelString, scaleLabelX, scaleLabelY);
|
||||
}
|
||||
|
||||
// Draw the line at the edge of the axis
|
||||
context.lineWidth = gridLines.lineWidth;
|
||||
context.strokeStyle = gridLines.color;
|
||||
var x1 = this.left,
|
||||
x2 = this.right,
|
||||
y1 = this.top,
|
||||
y2 = this.bottom;
|
||||
} else {
|
||||
setContextLineSettings = true;
|
||||
var xTickStart = options.position === "right" ? this.left : this.right - 5;
|
||||
var xTickEnd = options.position === "right" ? this.left + 5 : this.right;
|
||||
|
||||
var aliasPixel = helpers.aliasPixel(context.lineWidth);
|
||||
if (this.isHorizontal()) {
|
||||
y1 = y2 = this.options.position === 'top' ? this.bottom : this.top;
|
||||
y1 += aliasPixel;
|
||||
y2 += aliasPixel;
|
||||
} else {
|
||||
x1 = x2 = this.options.position === 'left' ? this.right : this.left;
|
||||
x1 += aliasPixel;
|
||||
x2 += aliasPixel;
|
||||
helpers.each(this.ticks, function (label, index) {
|
||||
// If the callback returned a null or undefined value, do not draw this line
|
||||
if (label === undefined || label === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
var yLineValue = this.getPixelForTick(index); // xvalues for grid lines
|
||||
|
||||
if (gridLines.display) {
|
||||
if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) {
|
||||
// Draw the first index specially
|
||||
context.lineWidth = gridLines.zeroLineWidth;
|
||||
context.strokeStyle = gridLines.zeroLineColor;
|
||||
setContextLineSettings = true; // reset next time
|
||||
} else if (setContextLineSettings) {
|
||||
context.lineWidth = gridLines.lineWidth;
|
||||
context.strokeStyle = gridLines.color;
|
||||
setContextLineSettings = false;
|
||||
}
|
||||
|
||||
yLineValue += helpers.aliasPixel(context.lineWidth);
|
||||
|
||||
// Draw the label area
|
||||
context.beginPath();
|
||||
|
||||
if (gridLines.drawTicks) {
|
||||
context.moveTo(xTickStart, yLineValue);
|
||||
context.lineTo(xTickEnd, yLineValue);
|
||||
}
|
||||
|
||||
// Draw the chart area
|
||||
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
|
||||
context.stroke();
|
||||
}
|
||||
|
||||
if (optionTicks.display) {
|
||||
var xLabelValue;
|
||||
var yLabelValue = this.getPixelForTick(index, gridLines.offsetGridLines); // x values for optionTicks (need to consider offsetLabel option)
|
||||
|
||||
context.save();
|
||||
|
||||
if (options.position === "left") {
|
||||
if (optionTicks.mirror) {
|
||||
xLabelValue = this.right + optionTicks.padding;
|
||||
context.textAlign = "left";
|
||||
} else {
|
||||
xLabelValue = this.right - optionTicks.padding;
|
||||
context.textAlign = "right";
|
||||
}
|
||||
} else {
|
||||
// right side
|
||||
if (optionTicks.mirror) {
|
||||
xLabelValue = this.left - optionTicks.padding;
|
||||
context.textAlign = "right";
|
||||
} else {
|
||||
xLabelValue = this.left + optionTicks.padding;
|
||||
context.textAlign = "left";
|
||||
}
|
||||
}
|
||||
|
||||
context.translate(xLabelValue, yLabelValue + optionTicks.labelOffset);
|
||||
context.rotate(labelRotationRadians * -1);
|
||||
context.font = tickLabelFont;
|
||||
context.textBaseline = "middle";
|
||||
context.fillText(label, 0, 0);
|
||||
context.restore();
|
||||
}
|
||||
}, this);
|
||||
|
||||
if (scaleLabel.display) {
|
||||
// Draw the scale label
|
||||
scaleLabelX = options.position === 'left' ? this.left + (scaleLabelFontSize / 2) : this.right - (scaleLabelFontSize / 2);
|
||||
scaleLabelY = this.top + ((this.bottom - this.top) / 2);
|
||||
var rotation = options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI;
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
context.beginPath();
|
||||
context.moveTo(x1, y1);
|
||||
context.lineTo(x2, y2);
|
||||
context.stroke();
|
||||
}
|
||||
|
||||
// Draw the line at the edge of the axis
|
||||
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 = options.position === 'top' ? this.bottom : this.top;
|
||||
y1 += aliasPixel;
|
||||
y2 += aliasPixel;
|
||||
} else {
|
||||
x1 = x2 = options.position === 'left' ? this.right : this.left;
|
||||
x1 += aliasPixel;
|
||||
x2 += aliasPixel;
|
||||
}
|
||||
|
||||
context.beginPath();
|
||||
context.moveTo(x1, y1);
|
||||
context.lineTo(x2, y2);
|
||||
context.stroke();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user