chart.js不允许y轴步长为对数刻度 [英] chart.js not allowing y axis steps with logarithmic scale
本文介绍了chart.js不允许y轴步长为对数刻度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我不得不解析科学表示法,这是对图形执行对数标度的结果,但是它打印出了图形中每一行的每个值。
I had to parse the scientific notation that was a result of implementing logarithmic scale to my graph but it printed out each value for each line in the graph. No method of steps seems to be working.
var packetsElement = $("#packetsGraph");
pckBarChart = new Chart(packetsElement, {
type: 'bar',
data: {
labels: ["Received", "Errors", "Lost"],
datasets: [{
label: '# of Packets',
data: packetsArr,
backgroundColor: [
'rgba(55,102,245,0.3)',
'rgba(55,102,245,0.2)',
'rgba(55,102,245,0.1)'
],
borderColor: [
'#3766F5',
'#3766F5',
'#3766F5'],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Packets',
fontSize: 20
},
scales: {
yAxes: [{
type: 'logarithmic',
ticks: {
min: 1,
stepSize: 1000000,
steps: 1000000,
stepValue: 1000000,
callback: function(value, index, values) {
return parseFloat(value);
}
}
}]
}
}
});
解决方案
I figured it out, here's what I did in case any one else needs it:
var packetsElement = $("#packetsGraph");
pckBarChart = new Chart(packetsElement, {
type: 'bar',
data: {
labels: ["Received", "Errors", "Lost"],
datasets: [{
label: '% of Packets (Logarithmic)',
data: packetsArr,
backgroundColor: [
'rgba(55,102,245,0.3)',
'rgba(55,102,245,0.2)',
'rgba(55,102,245,0.1)'
],
borderColor: [
'#3766F5',
'#3766F5',
'#3766F5'],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Packets',
fontSize: 20
},
scales: {
yAxes: [{
type: 'logarithmic',
ticks: {
min: 0,
max: 100,
callback: function(value, index, values) {//needed to change the scientific notation results from using logarithmic scale
return Number(value.toString());//pass tick values as a string into Number function
}
},
afterBuildTicks: function(pckBarChart) {
pckBarChart.ticks = [];
pckBarChart.ticks.push(0);
pckBarChart.ticks.push(25);
pckBarChart.ticks.push(50);
pckBarChart.ticks.push(75);
pckBarChart.ticks.push(100);
}
}]
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
return tooltipItems.yLabel + ' %';
}
}
},
}
});
这篇关于chart.js不允许y轴步长为对数刻度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文