mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-07 04:39:06 +02:00
Refactor scale base pixel and point calculation.
This commit is contained in:
parent
8c5d8855c6
commit
a566d16e69
@ -84,18 +84,7 @@ module.exports = function(Chart) {
|
||||
var meta = this.getMeta();
|
||||
var xScale = this.getScaleForId(meta.xAxisID);
|
||||
var yScale = this.getScaleForId(meta.yAxisID);
|
||||
|
||||
var yScalePoint;
|
||||
|
||||
if (yScale.min < 0 && yScale.max < 0) {
|
||||
// all less than 0. use the top
|
||||
yScalePoint = yScale.getPixelForValue(yScale.max);
|
||||
} else if (yScale.min > 0 && yScale.max > 0) {
|
||||
yScalePoint = yScale.getPixelForValue(yScale.min);
|
||||
} else {
|
||||
yScalePoint = yScale.getPixelForValue(0);
|
||||
}
|
||||
|
||||
var scaleBase = yScale.getBasePixel();
|
||||
var rectangleElementOptions = this.chart.options.elements.rectangle;
|
||||
var custom = rectangle.custom || {};
|
||||
var dataset = this.getDataset();
|
||||
@ -112,14 +101,14 @@ module.exports = function(Chart) {
|
||||
// Desired view properties
|
||||
_model: {
|
||||
x: this.calculateBarX(index, this.index),
|
||||
y: reset ? yScalePoint : this.calculateBarY(index, this.index),
|
||||
y: reset ? scaleBase : this.calculateBarY(index, this.index),
|
||||
|
||||
// Tooltip
|
||||
label: this.chart.data.labels[index],
|
||||
datasetLabel: dataset.label,
|
||||
|
||||
// Appearance
|
||||
base: reset ? yScalePoint : this.calculateBarBase(this.index, index),
|
||||
base: reset ? scaleBase : this.calculateBarBase(this.index, index),
|
||||
width: this.calculateBarWidth(index),
|
||||
backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor),
|
||||
borderSkipped: custom.borderSkipped ? custom.borderSkipped : rectangleElementOptions.borderSkipped,
|
||||
@ -132,9 +121,7 @@ module.exports = function(Chart) {
|
||||
|
||||
calculateBarBase: function(datasetIndex, index) {
|
||||
var meta = this.getMeta();
|
||||
var xScale = this.getScaleForId(meta.xAxisID);
|
||||
var yScale = this.getScaleForId(meta.yAxisID);
|
||||
|
||||
var base = 0;
|
||||
|
||||
if (yScale.options.stacked) {
|
||||
@ -163,24 +150,12 @@ module.exports = function(Chart) {
|
||||
return yScale.getPixelForValue(base);
|
||||
}
|
||||
|
||||
base = yScale.getPixelForValue(yScale.min);
|
||||
|
||||
if (yScale.beginAtZero || ((yScale.min <= 0 && yScale.max >= 0) || (yScale.min >= 0 && yScale.max <= 0))) {
|
||||
base = yScale.getPixelForValue(0, 0);
|
||||
//base += yScale.options.gridLines.lineWidth;
|
||||
} else if (yScale.min < 0 && yScale.max < 0) {
|
||||
// All values are negative. Use the top as the base
|
||||
base = yScale.getPixelForValue(yScale.max);
|
||||
}
|
||||
|
||||
return base;
|
||||
|
||||
return yScale.getBasePixel();
|
||||
},
|
||||
|
||||
getRuler: function(index) {
|
||||
var meta = this.getMeta();
|
||||
var xScale = this.getScaleForId(meta.xAxisID);
|
||||
var yScale = this.getScaleForId(meta.yAxisID);
|
||||
var datasetCount = this.getBarCount();
|
||||
|
||||
var tickWidth;
|
||||
@ -237,7 +212,6 @@ module.exports = function(Chart) {
|
||||
|
||||
calculateBarX: function(index, datasetIndex) {
|
||||
var meta = this.getMeta();
|
||||
var yScale = this.getScaleForId(meta.yAxisID);
|
||||
var xScale = this.getScaleForId(meta.xAxisID);
|
||||
var barIndex = this.getBarIndex(datasetIndex);
|
||||
|
||||
@ -259,9 +233,7 @@ module.exports = function(Chart) {
|
||||
|
||||
calculateBarY: function(index, datasetIndex) {
|
||||
var meta = this.getMeta();
|
||||
var xScale = this.getScaleForId(meta.xAxisID);
|
||||
var yScale = this.getScaleForId(meta.yAxisID);
|
||||
|
||||
var value = this.getDataset().data[index];
|
||||
|
||||
if (yScale.options.stacked) {
|
||||
@ -387,21 +359,11 @@ module.exports = function(Chart) {
|
||||
var meta = this.getMeta();
|
||||
var xScale = this.getScaleForId(meta.xAxisID);
|
||||
var yScale = this.getScaleForId(meta.yAxisID);
|
||||
|
||||
var xScalePoint;
|
||||
|
||||
if (xScale.min < 0 && xScale.max < 0) {
|
||||
// all less than 0. use the right
|
||||
xScalePoint = xScale.getPixelForValue(xScale.max);
|
||||
} else if (xScale.min > 0 && xScale.max > 0) {
|
||||
xScalePoint = xScale.getPixelForValue(xScale.min);
|
||||
} else {
|
||||
xScalePoint = xScale.getPixelForValue(0);
|
||||
}
|
||||
|
||||
var scaleBase = xScale.getBasePixel();
|
||||
var custom = rectangle.custom || {};
|
||||
var dataset = this.getDataset();
|
||||
var rectangleElementOptions = this.chart.options.elements.rectangle;
|
||||
|
||||
helpers.extend(rectangle, {
|
||||
// Utility
|
||||
_chart: this.chart.chart,
|
||||
@ -412,7 +374,7 @@ module.exports = function(Chart) {
|
||||
|
||||
// Desired view properties
|
||||
_model: {
|
||||
x: reset ? xScalePoint : this.calculateBarX(index, this.index),
|
||||
x: reset ? scaleBase : this.calculateBarX(index, this.index),
|
||||
y: this.calculateBarY(index, this.index),
|
||||
|
||||
// Tooltip
|
||||
@ -420,7 +382,7 @@ module.exports = function(Chart) {
|
||||
datasetLabel: dataset.label,
|
||||
|
||||
// Appearance
|
||||
base: reset ? xScalePoint : this.calculateBarBase(this.index, index),
|
||||
base: reset ? scaleBase : this.calculateBarBase(this.index, index),
|
||||
height: this.calculateBarHeight(index),
|
||||
backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor),
|
||||
borderSkipped: custom.borderSkipped ? custom.borderSkipped : rectangleElementOptions.borderSkipped,
|
||||
@ -506,8 +468,6 @@ module.exports = function(Chart) {
|
||||
calculateBarBase: function (datasetIndex, index) {
|
||||
var meta = this.getMeta();
|
||||
var xScale = this.getScaleForId(meta.xAxisID);
|
||||
var yScale = this.getScaleForId(meta.yAxisID);
|
||||
|
||||
var base = 0;
|
||||
|
||||
if (xScale.options.stacked) {
|
||||
@ -535,21 +495,11 @@ module.exports = function(Chart) {
|
||||
return xScale.getPixelForValue(base);
|
||||
}
|
||||
|
||||
base = xScale.getPixelForValue(xScale.min);
|
||||
|
||||
if (xScale.beginAtZero || ((xScale.min <= 0 && xScale.max >= 0) || (xScale.min >= 0 && xScale.max <= 0))) {
|
||||
base = xScale.getPixelForValue(0, 0);
|
||||
} else if (xScale.min < 0 && xScale.max < 0) {
|
||||
// All values are negative. Use the right as the base
|
||||
base = xScale.getPixelForValue(xScale.max);
|
||||
}
|
||||
|
||||
return base;
|
||||
return xScale.getBasePixel();
|
||||
},
|
||||
|
||||
getRuler: function (index) {
|
||||
var meta = this.getMeta();
|
||||
var xScale = this.getScaleForId(meta.xAxisID);
|
||||
var yScale = this.getScaleForId(meta.yAxisID);
|
||||
var datasetCount = this.getBarCount();
|
||||
|
||||
@ -592,8 +542,6 @@ module.exports = function(Chart) {
|
||||
calculateBarX: function (index, datasetIndex) {
|
||||
var meta = this.getMeta();
|
||||
var xScale = this.getScaleForId(meta.xAxisID);
|
||||
var yScale = this.getScaleForId(meta.yAxisID);
|
||||
|
||||
var value = this.getDataset().data[index];
|
||||
|
||||
if (xScale.options.stacked) {
|
||||
@ -626,7 +574,6 @@ module.exports = function(Chart) {
|
||||
calculateBarY: function (index, datasetIndex) {
|
||||
var meta = this.getMeta();
|
||||
var yScale = this.getScaleForId(meta.yAxisID);
|
||||
var xScale = this.getScaleForId(meta.xAxisID);
|
||||
var barIndex = this.getBarIndex(datasetIndex);
|
||||
|
||||
var ruler = this.getRuler(index);
|
||||
|
@ -64,17 +64,6 @@ module.exports = function(Chart) {
|
||||
update: function update(reset) {
|
||||
var meta = this.getMeta();
|
||||
var points = meta.data;
|
||||
var yScale = this.getScaleForId(meta.yAxisID);
|
||||
var xScale = this.getScaleForId(meta.xAxisID);
|
||||
var scaleBase;
|
||||
|
||||
if (yScale.min < 0 && yScale.max < 0) {
|
||||
scaleBase = yScale.getPixelForValue(yScale.max);
|
||||
} else if (yScale.min > 0 && yScale.max > 0) {
|
||||
scaleBase = yScale.getPixelForValue(yScale.min);
|
||||
} else {
|
||||
scaleBase = yScale.getPixelForValue(0);
|
||||
}
|
||||
|
||||
// Update Points
|
||||
helpers.each(points, function(point, index) {
|
||||
@ -85,23 +74,14 @@ module.exports = function(Chart) {
|
||||
|
||||
updateElement: function(point, index, reset) {
|
||||
var meta = this.getMeta();
|
||||
var yScale = this.getScaleForId(meta.yAxisID);
|
||||
var xScale = this.getScaleForId(meta.xAxisID);
|
||||
var scaleBase;
|
||||
var yScale = this.getScaleForId(meta.yAxisID);
|
||||
|
||||
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) {
|
||||
scaleBase = yScale.getPixelForValue(yScale.min);
|
||||
} else {
|
||||
scaleBase = yScale.getPixelForValue(0);
|
||||
}
|
||||
|
||||
helpers.extend(point, {
|
||||
// Utility
|
||||
_chart: this.chart.chart,
|
||||
@ -113,7 +93,7 @@ module.exports = function(Chart) {
|
||||
// Desired view properties
|
||||
_model: {
|
||||
x: reset ? xScale.getPixelForDecimal(0.5) : xScale.getPixelForValue(data, index, this.index, this.chart.isCombo),
|
||||
y: reset ? scaleBase : yScale.getPixelForValue(data, index, this.index),
|
||||
y: reset ? yScale.getBasePixel() : yScale.getPixelForValue(data, index, this.index),
|
||||
// Appearance
|
||||
radius: reset ? 0 : custom.radius ? custom.radius : this.getRadius(data),
|
||||
backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, pointElementOptions.backgroundColor),
|
||||
|
@ -72,17 +72,8 @@ module.exports = function(Chart) {
|
||||
var points = meta.data || [];
|
||||
var options = me.chart.options;
|
||||
var lineElementOptions = options.elements.line;
|
||||
var yScale = me.getScaleForId(meta.yAxisID);
|
||||
var xScale = me.getScaleForId(meta.xAxisID);
|
||||
var scaleBase, i, ilen, dataset, custom;
|
||||
|
||||
if (yScale.min < 0 && yScale.max < 0) {
|
||||
scaleBase = yScale.getPixelForValue(yScale.max);
|
||||
} else if (yScale.min > 0 && yScale.max > 0) {
|
||||
scaleBase = yScale.getPixelForValue(yScale.min);
|
||||
} else {
|
||||
scaleBase = yScale.getPixelForValue(0);
|
||||
}
|
||||
var scale = me.getScaleForId(meta.yAxisID);
|
||||
var i, ilen, dataset, custom;
|
||||
|
||||
// Update Line
|
||||
if (options.showLines) {
|
||||
@ -95,7 +86,7 @@ module.exports = function(Chart) {
|
||||
}
|
||||
|
||||
// Utility
|
||||
line._scale = yScale;
|
||||
line._scale = scale;
|
||||
line._datasetIndex = me.index;
|
||||
// Data
|
||||
line._children = points;
|
||||
@ -112,9 +103,9 @@ module.exports = function(Chart) {
|
||||
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,
|
||||
scaleZero: scaleBase
|
||||
scaleTop: scale.top,
|
||||
scaleBottom: scale.bottom,
|
||||
scaleZero: scale.getBasePixel()
|
||||
};
|
||||
|
||||
line.pivot();
|
||||
@ -188,15 +179,7 @@ module.exports = function(Chart) {
|
||||
var yScale = me.getScaleForId(meta.yAxisID);
|
||||
var xScale = me.getScaleForId(meta.xAxisID);
|
||||
var pointOptions = me.chart.options.elements.point;
|
||||
var scaleBase, x, y;
|
||||
|
||||
if (yScale.min < 0 && yScale.max < 0) {
|
||||
scaleBase = yScale.getPixelForValue(yScale.max);
|
||||
} else if (yScale.min > 0 && yScale.max > 0) {
|
||||
scaleBase = yScale.getPixelForValue(yScale.min);
|
||||
} else {
|
||||
scaleBase = yScale.getPixelForValue(0);
|
||||
}
|
||||
var x, y;
|
||||
|
||||
// Compatibility: If the properties are defined with only the old name, use those values
|
||||
if ((dataset.radius !== undefined) && (dataset.pointRadius === undefined)) {
|
||||
@ -207,7 +190,7 @@ module.exports = function(Chart) {
|
||||
}
|
||||
|
||||
x = xScale.getPixelForValue(value, index, datasetIndex, me.chart.isCombo);
|
||||
y = reset ? scaleBase : me.calculatePointY(value, index, datasetIndex, me.chart.isCombo);
|
||||
y = reset ? yScale.getBasePixel() : me.calculatePointY(value, index, datasetIndex, me.chart.isCombo);
|
||||
|
||||
// Utility
|
||||
point._chart = me.chart.chart;
|
||||
@ -237,7 +220,6 @@ module.exports = function(Chart) {
|
||||
var me = this;
|
||||
var chart = me.chart;
|
||||
var meta = me.getMeta();
|
||||
var xScale = me.getScaleForId(meta.xAxisID);
|
||||
var yScale = me.getScaleForId(meta.yAxisID);
|
||||
var sumPos = 0;
|
||||
var sumNeg = 0;
|
||||
|
@ -65,21 +65,10 @@ module.exports = function(Chart) {
|
||||
var custom = line.custom || {};
|
||||
var dataset = this.getDataset();
|
||||
var lineElementOptions = this.chart.options.elements.line;
|
||||
|
||||
var scale = this.chart.scale;
|
||||
var scaleBase;
|
||||
|
||||
if (scale.min < 0 && scale.max < 0) {
|
||||
scaleBase = scale.getPointPositionForValue(0, scale.max);
|
||||
} else if (scale.min > 0 && scale.max > 0) {
|
||||
scaleBase = scale.getPointPositionForValue(0, scale.min);
|
||||
} else {
|
||||
scaleBase = scale.getPointPositionForValue(0, 0);
|
||||
}
|
||||
|
||||
// Compatibility: If the properties are defined with only the old name, use those values
|
||||
if ((dataset.tension !== undefined) && (dataset.lineTension === undefined))
|
||||
{
|
||||
if ((dataset.tension !== undefined) && (dataset.lineTension === undefined)) {
|
||||
dataset.lineTension = dataset.tension;
|
||||
}
|
||||
|
||||
@ -104,7 +93,7 @@ module.exports = function(Chart) {
|
||||
// Scale
|
||||
scaleTop: scale.top,
|
||||
scaleBottom: scale.bottom,
|
||||
scaleZero: scaleBase
|
||||
scaleZero: scale.getBasePosition()
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -451,6 +451,18 @@ module.exports = function(Chart) {
|
||||
}
|
||||
},
|
||||
|
||||
getBasePixel: function() {
|
||||
var me = this;
|
||||
var min = me.min;
|
||||
var max = me.max;
|
||||
|
||||
return me.getPixelForValue(
|
||||
me.beginAtZero? 0:
|
||||
min < 0 && max < 0? max :
|
||||
min > 0 && max > 0? min :
|
||||
0);
|
||||
},
|
||||
|
||||
// Actualy draw the scale on the canvas
|
||||
// @param {rectangle} chartArea : the area of the chart to draw full grid lines on
|
||||
draw: function(chartArea) {
|
||||
|
@ -321,6 +321,19 @@ module.exports = function(Chart) {
|
||||
getPointPositionForValue: function(index, value) {
|
||||
return this.getPointPosition(index, this.getDistanceFromCenterForValue(value));
|
||||
},
|
||||
|
||||
getBasePosition: function() {
|
||||
var me = this;
|
||||
var min = me.min;
|
||||
var max = me.max;
|
||||
|
||||
return me.getPointPositionForValue(0,
|
||||
me.beginAtZero? 0:
|
||||
min < 0 && max < 0? max :
|
||||
min > 0 && max > 0? min :
|
||||
0);
|
||||
},
|
||||
|
||||
draw: function() {
|
||||
if (this.options.display) {
|
||||
var ctx = this.ctx;
|
||||
|
Loading…
Reference in New Issue
Block a user