Merge pull request #2569 from chartjs/fix/2216

Improve bar sizing
This commit is contained in:
Evert Timberg 2016-05-17 18:04:23 -04:00
commit ca7434a5ea

View File

@ -120,7 +120,7 @@ module.exports = function(Chart) {
// Appearance
base: reset ? yScalePoint : this.calculateBarBase(this.index, index),
width: this.calculateBarWidth(numBars),
width: this.calculateBarWidth(index),
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),
@ -177,19 +177,20 @@ module.exports = function(Chart) {
},
getRuler: function() {
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 = (function() {
var min = xScale.getPixelForTick(1) - xScale.getPixelForTick(0);
for (var i = 2; i < xScale.ticks.length; i++) {
min = Math.min(xScale.getPixelForTick(i) - xScale.getPixelForTick(i - 1), min);
}
return min;
}).call(this);
var tickWidth;
if (xScale.options.type === 'category') {
tickWidth = xScale.getPixelForTick(index + 1) - xScale.getPixelForTick(index);
} else {
// Average width
tickWidth = xScale.width / xScale.ticks.length;
}
var categoryWidth = tickWidth * xScale.options.categoryPercentage;
var categorySpacing = (tickWidth - (tickWidth * xScale.options.categoryPercentage)) / 2;
var fullBarWidth = categoryWidth / datasetCount;
@ -213,9 +214,9 @@ module.exports = function(Chart) {
};
},
calculateBarWidth: function() {
calculateBarWidth: function(index) {
var xScale = this.getScaleForId(this.getMeta().xAxisID);
var ruler = this.getRuler();
var ruler = this.getRuler(index);
return xScale.options.stacked ? ruler.categoryWidth : ruler.barWidth;
},
@ -240,7 +241,7 @@ module.exports = function(Chart) {
var xScale = this.getScaleForId(meta.xAxisID);
var barIndex = this.getBarIndex(datasetIndex);
var ruler = this.getRuler();
var ruler = this.getRuler(index);
var leftTick = xScale.getPixelForValue(null, index, datasetIndex, this.chart.isCombo);
leftTick -= this.chart.isCombo ? (ruler.tickWidth / 2) : 0;
@ -420,7 +421,7 @@ module.exports = function(Chart) {
// Appearance
base: reset ? xScalePoint : this.calculateBarBase(this.index, index),
height: this.calculateBarHeight(numBars),
height: this.calculateBarHeight(index),
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),
@ -546,19 +547,19 @@ module.exports = function(Chart) {
return base;
},
getRuler: function () {
getRuler: function (index) {
var meta = this.getMeta();
var xScale = this.getScaleForId(meta.xAxisID);
var yScale = this.getScaleForId(meta.yAxisID);
var datasetCount = this.getBarCount();
var tickHeight = (function () {
var min = yScale.getPixelForTick(1) - yScale.getPixelForTick(0);
for (var i = 2; i < this.getDataset().data.length; i++) {
min = Math.min(yScale.getPixelForTick(i) - yScale.getPixelForTick(i - 1), min);
}
return min;
}).call(this);
var tickHeight;
if (yScale.options.type === 'category') {
tickHeight = yScale.getPixelForTick(index + 1) - yScale.getPixelForTick(index);
} else {
// Average width
tickHeight = yScale.width / yScale.ticks.length;
}
var categoryHeight = tickHeight * yScale.options.categoryPercentage;
var categorySpacing = (tickHeight - (tickHeight * yScale.options.categoryPercentage)) / 2;
var fullBarHeight = categoryHeight / datasetCount;
@ -582,9 +583,9 @@ module.exports = function(Chart) {
};
},
calculateBarHeight: function () {
calculateBarHeight: function (index) {
var yScale = this.getScaleForId(this.getMeta().yAxisID);
var ruler = this.getRuler();
var ruler = this.getRuler(index);
return yScale.options.stacked ? ruler.categoryHeight : ruler.barHeight;
},
@ -628,7 +629,7 @@ module.exports = function(Chart) {
var xScale = this.getScaleForId(meta.xAxisID);
var barIndex = this.getBarIndex(datasetIndex);
var ruler = this.getRuler();
var ruler = this.getRuler(index);
var topTick = yScale.getPixelForValue(null, index, datasetIndex, this.chart.isCombo);
topTick -= this.chart.isCombo ? (ruler.tickHeight / 2) : 0;