archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'etimberg-fix/bar_chart_negative_values' into v2.0-dev

Browse Source 
Merge in the changes to allow bar charts to support negative values.
This commit is contained in:
etimberg 2015-05-12 08:01:22 -04:00
commit e709b13e77
3 changed files with 38 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
samples/bar.html
View File

@ -1,6 +1,5 @@
<!doctype html>
<html>
<head>
<title>Bar Chart</title>
<script src="../Chart.js"></script>
@ -13,8 +12,8 @@
</div>
<button id="randomizeData">Randomize Data</button>
<script>
var randomScalingFactor = function() {
return Math.round(Math.random() * 100)
var randomScalingFactor = function(){
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random()*100)
};
var randomColorFactor = function() {
return Math.round(Math.random() * 255)
@ -35,7 +34,8 @@
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive: true,
hoverMode: 'bar'
hoverMode: 'bar',
scaleBeginAtZero: false,
});
}
@ -52,5 +52,4 @@
});
</script>
</body>
</html>

32
src/Chart.Bar.js
View File

@ -110,7 +110,7 @@
helpers.extend(bar, {
width : this.scale.calculateBarWidth(this.data.datasets.length),
x: this.scale.calculateBarX(this.data.datasets.length, datasetIndex, index),
y: this.scale.endPoint,
y: this.calculateBarBase(),
});
// Copy to view model
bar.save();
@ -175,6 +175,26 @@
//this.showTooltip(active);
},
// Calculate the base point for the bar.
// If the scale has a 0 point, use that as the base
// If the scale min and max are both positive, use the bottom as a base
// If the scale min and max are both negative, use the top as a base
calculateBarBase: function() {
var base = this.scale.endPoint;
if (this.scale.beginAtZero || ((this.scale.min <= 0 && this.scale.max >= 0) || (this.scale.min >= 0 && this.scale.max <= 0)))
{
base = this.scale.calculateY(0);
base += this.options.scaleGridLineWidth;
}
else if (this.scale.min < 0 && this.scale.max < 0)
{
// All values are negative. Use the top as the base
base = this.scale.startPoint;
}
return base;
},
update : function(){
this.scale.update();
@ -314,9 +334,9 @@
label : label,
datasetLabel: this.data.datasets[datasetIndex].label,
x: this.scale.calculateBarX(this.data.datasets.length, datasetIndex, this.scale.valuesCount+1),
y: this.scale.endPoint,
y: this.calculateBarBase(),
width : this.scale.calculateBarWidth(this.data.datasets.length),
base : this.scale.endPoint,
base : this.calculateBarBase(),
borderColor : this.data.datasets[datasetIndex].borderColor,
backgroundColor : this.data.datasets[datasetIndex].backgroundColor
}));
@ -336,8 +356,8 @@
},
reflow : function(){
helpers.extend(this.BarClass.prototype,{
y: this.scale.endPoint,
base : this.scale.endPoint
y: this.calculateBarBase(), // so that we animate from the baseline
base : this.calculateBarBase()
});
var newScaleProps = helpers.extend({
height : this.chart.height,
@ -356,7 +376,7 @@
this.eachBars(function(bar, index, datasetIndex){
if (bar.hasValue()){
// Update the bar basepoint
bar.base = this.scale.endPoint;
bar.base = this.calculateBarBase();
//Transition
bar.transition([
'x',

10
src/Chart.Core.js
View File

@ -1384,8 +1384,14 @@
return vm.base - vm.y;
},
inRange : function(chartX,chartY){
var vm = this._vm;
return (chartX >= vm.x - vm.width/2 && chartX <= vm.x + vm.width/2) && (chartY >= vm.y && chartY <= vm.base);
if (this.y < this.base)
{
return (chartX >= this.x - this.width/2 && chartX <= this.x + this.width/2) && (chartY >= this.y && chartY <= this.base);
}
else
{
return (chartX >= this.x - this.width / 2 && chartX <= this.x + this.width / 2) && (chartY >= this.base && chartY <= this.y);
}
}
});