mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-07 12:49:07 +02:00
Fixed typo in core.helpers.js.
Added ticks.fixedStepSize configuration parameter to force linear scale steps.
This commit is contained in:
parent
df218ead82
commit
9a20381af4
@ -843,7 +843,7 @@
|
|||||||
},
|
},
|
||||||
isDatasetVisible = helpers.isDatasetVisible = function(dataset) {
|
isDatasetVisible = helpers.isDatasetVisible = function(dataset) {
|
||||||
return !dataset.hidden;
|
return !dataset.hidden;
|
||||||
};
|
},
|
||||||
pushAllIfDefined = helpers.pushAllIfDefined = function(element, array) {
|
pushAllIfDefined = helpers.pushAllIfDefined = function(element, array) {
|
||||||
if (typeof element == "undefined") {
|
if (typeof element == "undefined") {
|
||||||
return;
|
return;
|
||||||
|
@ -1,233 +1,239 @@
|
|||||||
(function() {
|
(function () {
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
var root = this,
|
var root = this,
|
||||||
Chart = root.Chart,
|
Chart = root.Chart,
|
||||||
helpers = Chart.helpers;
|
helpers = Chart.helpers;
|
||||||
|
|
||||||
var defaultConfig = {
|
var defaultConfig = {
|
||||||
position: "left",
|
position: "left",
|
||||||
ticks: {
|
ticks: {
|
||||||
callback: function(tickValue, index, ticks) {
|
callback: function (tickValue, index, ticks) {
|
||||||
var delta = ticks[1] - ticks[0];
|
var delta = ticks[1] - ticks[0];
|
||||||
|
|
||||||
// If we have a number like 2.5 as the delta, figure out how many decimal places we need
|
// If we have a number like 2.5 as the delta, figure out how many decimal places we need
|
||||||
if (Math.abs(delta) > 1) {
|
if (Math.abs(delta) > 1) {
|
||||||
if (tickValue !== Math.floor(tickValue)) {
|
if (tickValue !== Math.floor(tickValue)) {
|
||||||
// not an integer
|
// not an integer
|
||||||
delta = tickValue - Math.floor(tickValue);
|
delta = tickValue - Math.floor(tickValue);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var logDelta = helpers.log10(Math.abs(delta));
|
var logDelta = helpers.log10(Math.abs(delta));
|
||||||
var tickString = '';
|
var tickString = '';
|
||||||
|
|
||||||
if (tickValue !== 0) {
|
if (tickValue !== 0) {
|
||||||
var numDecimal = -1 * Math.floor(logDelta);
|
var numDecimal = -1 * Math.floor(logDelta);
|
||||||
numDecimal = Math.max(Math.min(numDecimal, 20), 0); // toFixed has a max of 20 decimal places
|
numDecimal = Math.max(Math.min(numDecimal, 20), 0); // toFixed has a max of 20 decimal places
|
||||||
tickString = tickValue.toFixed(numDecimal);
|
tickString = tickValue.toFixed(numDecimal);
|
||||||
} else {
|
} else {
|
||||||
tickString = '0'; // never show decimal places for 0
|
tickString = '0'; // never show decimal places for 0
|
||||||
}
|
}
|
||||||
|
|
||||||
return tickString;
|
return tickString;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
var LinearScale = Chart.Scale.extend({
|
var LinearScale = Chart.Scale.extend({
|
||||||
buildTicks: function() {
|
buildTicks: function () {
|
||||||
|
|
||||||
// First Calculate the range
|
// First Calculate the range
|
||||||
this.min = null;
|
this.min = null;
|
||||||
this.max = null;
|
this.max = null;
|
||||||
|
|
||||||
if (this.options.stacked) {
|
if (this.options.stacked) {
|
||||||
var valuesPerType = {};
|
var valuesPerType = {};
|
||||||
|
|
||||||
helpers.each(this.chart.data.datasets, function(dataset) {
|
helpers.each(this.chart.data.datasets, function (dataset) {
|
||||||
if (valuesPerType[dataset.type] === undefined) {
|
if (valuesPerType[dataset.type] === undefined) {
|
||||||
valuesPerType[dataset.type] = {
|
valuesPerType[dataset.type] = {
|
||||||
positiveValues: [],
|
positiveValues: [],
|
||||||
negativeValues: [],
|
negativeValues: [],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Store these per type
|
// Store these per type
|
||||||
var positiveValues = valuesPerType[dataset.type].positiveValues;
|
var positiveValues = valuesPerType[dataset.type].positiveValues;
|
||||||
var negativeValues = valuesPerType[dataset.type].negativeValues;
|
var negativeValues = valuesPerType[dataset.type].negativeValues;
|
||||||
|
|
||||||
if (helpers.isDatasetVisible(dataset) && (this.isHorizontal() ? dataset.xAxisID === this.id : dataset.yAxisID === this.id)) {
|
if (helpers.isDatasetVisible(dataset) && (this.isHorizontal() ? dataset.xAxisID === this.id : dataset.yAxisID === this.id)) {
|
||||||
helpers.each(dataset.data, function(rawValue, index) {
|
helpers.each(dataset.data, function (rawValue, index) {
|
||||||
|
|
||||||
var value = +this.getRightValue(rawValue);
|
var value = +this.getRightValue(rawValue);
|
||||||
if (isNaN(value)) {
|
if (isNaN(value)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
positiveValues[index] = positiveValues[index] || 0;
|
positiveValues[index] = positiveValues[index] || 0;
|
||||||
negativeValues[index] = negativeValues[index] || 0;
|
negativeValues[index] = negativeValues[index] || 0;
|
||||||
|
|
||||||
if (this.options.relativePoints) {
|
if (this.options.relativePoints) {
|
||||||
positiveValues[index] = 100;
|
positiveValues[index] = 100;
|
||||||
} else {
|
} else {
|
||||||
if (value < 0) {
|
if (value < 0) {
|
||||||
negativeValues[index] += value;
|
negativeValues[index] += value;
|
||||||
} else {
|
} else {
|
||||||
positiveValues[index] += value;
|
positiveValues[index] += value;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, this);
|
}, this);
|
||||||
}
|
}
|
||||||
}, this);
|
}, this);
|
||||||
|
|
||||||
helpers.each(valuesPerType, function(valuesForType) {
|
helpers.each(valuesPerType, function (valuesForType) {
|
||||||
var values = valuesForType.positiveValues.concat(valuesForType.negativeValues);
|
var values = valuesForType.positiveValues.concat(valuesForType.negativeValues);
|
||||||
var minVal = helpers.min(values);
|
var minVal = helpers.min(values);
|
||||||
var maxVal = helpers.max(values);
|
var maxVal = helpers.max(values);
|
||||||
this.min = this.min === null ? minVal : Math.min(this.min, minVal);
|
this.min = this.min === null ? minVal : Math.min(this.min, minVal);
|
||||||
this.max = this.max === null ? maxVal : Math.max(this.max, maxVal);
|
this.max = this.max === null ? maxVal : Math.max(this.max, maxVal);
|
||||||
}, this);
|
}, this);
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
helpers.each(this.chart.data.datasets, function(dataset) {
|
helpers.each(this.chart.data.datasets, function (dataset) {
|
||||||
if (helpers.isDatasetVisible(dataset) && (this.isHorizontal() ? dataset.xAxisID === this.id : dataset.yAxisID === this.id)) {
|
if (helpers.isDatasetVisible(dataset) && (this.isHorizontal() ? dataset.xAxisID === this.id : dataset.yAxisID === this.id)) {
|
||||||
helpers.each(dataset.data, function(rawValue, index) {
|
helpers.each(dataset.data, function (rawValue, index) {
|
||||||
var value = +this.getRightValue(rawValue);
|
var value = +this.getRightValue(rawValue);
|
||||||
if (isNaN(value)) {
|
if (isNaN(value)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.min === null) {
|
if (this.min === null) {
|
||||||
this.min = value;
|
this.min = value;
|
||||||
} else if (value < this.min) {
|
} else if (value < this.min) {
|
||||||
this.min = value;
|
this.min = value;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.max === null) {
|
if (this.max === null) {
|
||||||
this.max = value;
|
this.max = value;
|
||||||
} else if (value > this.max) {
|
} else if (value > this.max) {
|
||||||
this.max = value;
|
this.max = value;
|
||||||
}
|
}
|
||||||
}, this);
|
}, this);
|
||||||
}
|
}
|
||||||
}, this);
|
}, this);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Then calulate the ticks
|
// Then calulate the ticks
|
||||||
this.ticks = [];
|
this.ticks = [];
|
||||||
|
|
||||||
// Figure out what the max number of ticks we can support it is based on the size of
|
// Figure out what the max number of ticks we can support it is based on the size of
|
||||||
// the axis area. For now, we say that the minimum tick spacing in pixels must be 50
|
// the axis area. For now, we say that the minimum tick spacing in pixels must be 50
|
||||||
// We also limit the maximum number of ticks to 11 which gives a nice 10 squares on
|
// We also limit the maximum number of ticks to 11 which gives a nice 10 squares on
|
||||||
// the graph
|
// the graph
|
||||||
|
|
||||||
var maxTicks;
|
var maxTicks;
|
||||||
|
|
||||||
if (this.isHorizontal()) {
|
if (this.isHorizontal()) {
|
||||||
maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11,
|
maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11,
|
||||||
Math.ceil(this.width / 50));
|
Math.ceil(this.width / 50));
|
||||||
} else {
|
} else {
|
||||||
// The factor of 2 used to scale the font size has been experimentally determined.
|
// The factor of 2 used to scale the font size has been experimentally determined.
|
||||||
maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11,
|
maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11,
|
||||||
Math.ceil(this.height / (2 * this.options.ticks.fontSize)));
|
Math.ceil(this.height / (2 * this.options.ticks.fontSize)));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Make sure we always have at least 2 ticks
|
// Make sure we always have at least 2 ticks
|
||||||
maxTicks = Math.max(2, maxTicks);
|
maxTicks = Math.max(2, maxTicks);
|
||||||
|
|
||||||
// To get a "nice" value for the tick spacing, we will use the appropriately named
|
// To get a "nice" value for the tick spacing, we will use the appropriately named
|
||||||
// "nice number" algorithm. See http://stackoverflow.com/questions/8506881/nice-label-algorithm-for-charts-with-minimum-ticks
|
// "nice number" algorithm. See http://stackoverflow.com/questions/8506881/nice-label-algorithm-for-charts-with-minimum-ticks
|
||||||
// for details.
|
// for details.
|
||||||
|
|
||||||
// If we are forcing it to begin at 0, but 0 will already be rendered on the chart,
|
// If we are forcing it to begin at 0, but 0 will already be rendered on the chart,
|
||||||
// do nothing since that would make the chart weird. If the user really wants a weird chart
|
// do nothing since that would make the chart weird. If the user really wants a weird chart
|
||||||
// axis, they can manually override it
|
// axis, they can manually override it
|
||||||
if (this.options.ticks.beginAtZero) {
|
if (this.options.ticks.beginAtZero) {
|
||||||
var minSign = helpers.sign(this.min);
|
var minSign = helpers.sign(this.min);
|
||||||
var maxSign = helpers.sign(this.max);
|
var maxSign = helpers.sign(this.max);
|
||||||
|
|
||||||
if (minSign < 0 && maxSign < 0) {
|
if (minSign < 0 && maxSign < 0) {
|
||||||
// move the top up to 0
|
// move the top up to 0
|
||||||
this.max = 0;
|
this.max = 0;
|
||||||
} else if (minSign > 0 && maxSign > 0) {
|
} else if (minSign > 0 && maxSign > 0) {
|
||||||
// move the botttom down to 0
|
// move the botttom down to 0
|
||||||
this.min = 0;
|
this.min = 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.options.ticks.suggestedMin) {
|
|
||||||
this.min = Math.min(this.min, this.options.ticks.suggestedMin);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.options.ticks.suggestedMax) {
|
if (this.options.ticks.suggestedMin) {
|
||||||
this.max = Math.max(this.max, this.options.ticks.suggestedMax);
|
this.min = Math.min(this.min, this.options.ticks.suggestedMin);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.min === this.max) {
|
if (this.options.ticks.suggestedMax) {
|
||||||
this.min--;
|
this.max = Math.max(this.max, this.options.ticks.suggestedMax);
|
||||||
this.max++;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
var niceRange = helpers.niceNum(this.max - this.min, false);
|
if (this.min === this.max) {
|
||||||
var spacing = helpers.niceNum(niceRange / (maxTicks - 1), true);
|
this.min--;
|
||||||
var niceMin = Math.floor(this.min / spacing) * spacing;
|
this.max++;
|
||||||
var niceMax = Math.ceil(this.max / spacing) * spacing;
|
}
|
||||||
|
|
||||||
var numSpaces = Math.ceil((niceMax - niceMin) / spacing);
|
if (this.options.ticks.fixedStepSize) {
|
||||||
|
for (var j = this.min; j <= this.max; ++j) {
|
||||||
|
console.log(j * this.options.ticks.fixedStepSize);
|
||||||
|
this.ticks.push(j * this.options.ticks.fixedStepSize);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
var niceRange = helpers.niceNum(this.max - this.min, false);
|
||||||
|
var spacing = helpers.niceNum(niceRange / (maxTicks - 1), true);
|
||||||
|
var niceMin = Math.floor(this.min / spacing) * spacing;
|
||||||
|
var niceMax = Math.ceil(this.max / spacing) * spacing;
|
||||||
|
|
||||||
// Put the values into the ticks array
|
var numSpaces = Math.ceil((niceMax - niceMin) / spacing);
|
||||||
for (var j = 0; j <= numSpaces; ++j) {
|
|
||||||
this.ticks.push(niceMin + (j * spacing));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.options.position == "left" || this.options.position == "right") {
|
// Put the values into the ticks array
|
||||||
// We are in a vertical orientation. The top value is the highest. So reverse the array
|
for (var j = 0; j <= numSpaces; ++j) {
|
||||||
this.ticks.reverse();
|
this.ticks.push(niceMin + (j * spacing));
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// At this point, we need to update our max and min given the tick values since we have expanded the
|
if (this.options.position == "left" || this.options.position == "right") {
|
||||||
// range of the scale
|
// We are in a vertical orientation. The top value is the highest. So reverse the array
|
||||||
this.max = helpers.max(this.ticks);
|
this.ticks.reverse();
|
||||||
this.min = helpers.min(this.ticks);
|
}
|
||||||
|
|
||||||
if (this.options.ticks.reverse) {
|
// At this point, we need to update our max and min given the tick values since we have expanded the
|
||||||
this.ticks.reverse();
|
// range of the scale
|
||||||
|
this.max = helpers.max(this.ticks);
|
||||||
|
this.min = helpers.min(this.ticks);
|
||||||
|
|
||||||
this.start = this.max;
|
if (this.options.ticks.reverse) {
|
||||||
this.end = this.min;
|
this.ticks.reverse();
|
||||||
} else {
|
|
||||||
this.start = this.min;
|
|
||||||
this.end = this.max;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.zeroLineIndex = this.ticks.indexOf(0);
|
this.start = this.max;
|
||||||
},
|
this.end = this.min;
|
||||||
|
} else {
|
||||||
|
this.start = this.min;
|
||||||
|
this.end = this.max;
|
||||||
|
}
|
||||||
|
|
||||||
getLabelForIndex: function(index, datasetIndex) {
|
this.zeroLineIndex = this.ticks.indexOf(0);
|
||||||
return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
|
},
|
||||||
},
|
getLabelForIndex: function (index, datasetIndex) {
|
||||||
|
return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
|
||||||
|
},
|
||||||
|
// Utils
|
||||||
|
getPixelForValue: function (value, index, datasetIndex, includeOffset) {
|
||||||
|
// This must be called after fit has been run so that
|
||||||
|
// this.left, this.top, this.right, and this.bottom have been defined
|
||||||
|
var rightValue = +this.getRightValue(value);
|
||||||
|
var pixel;
|
||||||
|
var range = this.end - this.start;
|
||||||
|
|
||||||
// Utils
|
if (this.isHorizontal()) {
|
||||||
getPixelForValue: function(value, index, datasetIndex, includeOffset) {
|
|
||||||
// This must be called after fit has been run so that
|
|
||||||
// this.left, this.top, this.right, and this.bottom have been defined
|
|
||||||
var rightValue = +this.getRightValue(value);
|
|
||||||
var pixel;
|
|
||||||
var range = this.end - this.start;
|
|
||||||
|
|
||||||
if (this.isHorizontal()) {
|
var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
|
||||||
|
pixel = this.left + (innerWidth / range * (rightValue - this.start));
|
||||||
var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
|
return Math.round(pixel + this.paddingLeft);
|
||||||
pixel = this.left + (innerWidth / range * (rightValue - this.start));
|
} else {
|
||||||
return Math.round(pixel + this.paddingLeft);
|
var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
|
||||||
} else {
|
pixel = (this.bottom - this.paddingBottom) - (innerHeight / range * (rightValue - this.start));
|
||||||
var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
|
return Math.round(pixel);
|
||||||
pixel = (this.bottom - this.paddingBottom) - (innerHeight / range * (rightValue - this.start));
|
}
|
||||||
return Math.round(pixel);
|
},
|
||||||
}
|
});
|
||||||
},
|
Chart.scaleService.registerScaleType("linear", LinearScale, defaultConfig);
|
||||||
});
|
|
||||||
Chart.scaleService.registerScaleType("linear", LinearScale, defaultConfig);
|
|
||||||
|
|
||||||
}).call(this);
|
}).call(this);
|
||||||
|
Loading…
Reference in New Issue
Block a user