existing Logarithmic Axis默认为10的底数。是否可以将小数位数更改为其他底数的对数?
答案 0 :(得分:1)
您可以实现自定义比例来更改对数比例的基础,如下所示:
class Log2Axis extends Chart.Scale {
constructor(cfg) {
super(cfg);
this._startValue = undefined;
this._valueRange = 0;
}
parse(raw, index) {
const value = Chart.LinearScale.prototype.parse.apply(this, [raw, index]);
return isFinite(value) && value > 0 ? value : null;
}
determineDataLimits() {
const {
min,
max
} = this.getMinMax(true);
this.min = isFinite(min) ? Math.max(0, min) : null;
this.max = isFinite(max) ? Math.max(0, max) : null;
}
buildTicks() {
const ticks = [];
let power = Math.floor(Math.log2(this.min || 1));
let maxPower = Math.ceil(Math.log2(this.max || 2));
while (power <= maxPower) {
ticks.push({
value: Math.pow(2, power)
});
power += 1;
}
this.min = ticks[0].value;
this.max = ticks[ticks.length - 1].value;
return ticks;
}
/**
* @protected
*/
configure() {
const start = this.min;
super.configure();
this._startValue = Math.log2(start);
this._valueRange = Math.log2(this.max) - Math.log2(start);
}
getPixelForValue(value) {
if (value === undefined || value === 0) {
value = this.min;
}
return this.getPixelForDecimal(value === this.min ? 0 :
(Math.log2(value) - this._startValue) / this._valueRange);
}
getValueForPixel(pixel) {
const decimal = this.getDecimalForPixel(pixel);
return Math.pow(2, this._startValue + decimal * this._valueRange);
}
}
Log2Axis.id = 'log2';
Log2Axis.defaults = {};
Chart.register(Log2Axis);
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Black", "White"],
datasets: [{
label: '# of Votes',
data: [8, 3, 60, 20, 130, 80, 1030, 250],
backgroundColor: 'pink',
borderColor: 'pink'
}]
},
options: {
scales: {
x: {
display: true
},
y: {
display: true,
type: 'log2',
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
</body>
小提琴链接:https://jsfiddle.net/Leelenaleee/oyLf0wed/6/
感谢为此制作示例的 chart.js 团队:https://www.chartjs.org/docs/master/samples/advanced/derived-axis-type.html