Adds min and max setting to axes

This commit is contained in:
Mattias Lyckne
2015-12-14 08:39:11 +01:00
parent 571120d650
commit 968db4e783
5 changed files with 113 additions and 0 deletions

View File

@@ -46,6 +46,8 @@ display | Boolean | true | If true, show the scale including gridlines, ticks, a
*ticks*.display | Boolean | true | If true, show the ticks.
*ticks*.suggestedMin | Number | - | User defined minimum number for the scale, overrides minimum value *except for if* it is higher than the minimum value.
*ticks*.suggestedMax | Number | - | User defined maximum number for the scale, overrides maximum value *except for if* it is lower than the maximum value.
*ticks*.min | Number | - | User defined minimum number for the scale, overrides minimum value
*ticks*.max | Number | - | User defined minimum number for the scale, overrides maximum value
*ticks*.callback | Function | `function(value) { return '' + value; } ` | Returns the string representation of the tick value as it should be displayed on the chart.
The `callback` method may be used for advanced tick customization. The following callback would display every label in scientific notation

View File

@@ -181,6 +181,14 @@
this.ticks.push(niceMin + (j * spacing));
}
if (this.options.ticks.min !== undefined) {
this.ticks[0] = this.options.ticks.min;
}
if (this.options.ticks.max !== undefined) {
this.ticks[this.ticks.length - 1] = this.options.ticks.max;
}
if (this.options.position == "left" || this.options.position == "right") {
// We are in a vertical orientation. The top value is the highest. So reverse the array
this.ticks.reverse();
@@ -191,6 +199,15 @@
this.max = helpers.max(this.ticks);
this.min = helpers.min(this.ticks);
if (this.options.ticks.min !== undefined) {
this.min = this.options.ticks.min;
}
if (this.options.ticks.max !== undefined) {
this.max = this.options.ticks.max;
}
if (this.options.ticks.reverse) {
this.ticks.reverse();

View File

@@ -90,6 +90,14 @@
}, this);
}
if (this.options.ticks.max) {
this.max = this.options.ticks.max;
}
if (this.options.ticks.min) {
this.min = this.options.ticks.min;
}
if (this.min === this.max) {
if (this.min !== 0 && this.min !== null) {
this.min = Math.pow(10, Math.floor(helpers.log10(this.min)) - 1);
@@ -121,6 +129,14 @@
this.tickValues.push(1.0 * Math.pow(10, maxExponent));
if (this.options.ticks.min) {
this.tickValues[0] = this.min;
}
if (this.options.ticks.max) {
this.tickValues[this.tickValues.length - 1] = this.max;
}
if (this.options.position == "left" || this.options.position == "right") {
// We are in a vertical orientation. The top value is the highest. So reverse the array
this.tickValues.reverse();
@@ -131,6 +147,14 @@
this.max = helpers.max(this.tickValues);
this.min = helpers.min(this.tickValues);
if (this.options.ticks.min) {
this.min = this.options.ticks.min;
}
if (this.options.ticks.max) {
this.max = this.options.ticks.max;
}
if (this.options.ticks.reverse) {
this.tickValues.reverse();

View File

@@ -374,6 +374,41 @@ describe('Linear Scale', function() {
expect(scale.max).toBe(10);
});
it('Should use the min and max options', function() {
var scaleID = 'myScale';
var mockData = {
datasets: [{
yAxisID: scaleID,
data: [1, 1, 1, 2, 1, 0]
}]
};
var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
config.ticks.min = -1010;
config.ticks.max = 1010;
var Constructor = Chart.scaleService.getScaleConstructor('linear');
var scale = new Constructor({
ctx: {},
options: config,
chart: {
data: mockData
},
id: scaleID
});
// Set arbitrary width and height for now
scale.width = 50;
scale.height = 400;
scale.buildTicks();
expect(scale.min).toBe(-1010);
expect(scale.max).toBe(1010);
expect(scale.ticks[0]).toBe(1010);
expect(scale.ticks[scale.ticks.length-1]).toBe(-1010);
});
it('should forcibly include 0 in the range if the beginAtZero option is used', function() {
var scaleID = 'myScale';

View File

@@ -329,6 +329,41 @@ describe('Logarithmic Scale tests', function() {
expect(scale.max).toBe(1);
});
it('Should use the min and max options', function() {
var scaleID = 'myScale';
var mockData = {
datasets: [{
yAxisID: scaleID,
data: [1, 1, 1, 2, 1, 0]
}]
};
var mockContext = window.createMockContext();
var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic'));
config.ticks.min = 10;
config.ticks.max = 1010;
var Constructor = Chart.scaleService.getScaleConstructor('logarithmic');
var scale = new Constructor({
ctx: mockContext,
options: config,
chart: {
data: mockData
},
id: scaleID
});
scale.update(400, 00);
scale.buildTicks();
expect(scale.min).toBe(10);
expect(scale.max).toBe(1010);
expect(scale.ticks[0]).toBe(1010);
expect(scale.ticks[scale.ticks.length - 1]).toBe(10);
});
it('Should generate tick marks', function() {
var scaleID = 'myScale';