我创建了一个x轴为对数的水平条形图:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [1000000000, 100000000, 10000000, 1000000, 100000, 1000],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'logarithmic',
position: 'bottom',
ticks: {
userCallback: function(tick) {
var remain = tick / (Math.pow(10, Math.floor(Chart.helpers.log10(tick))));
if (remain === 1 || remain === 5) {
var test = tick.toString();
if(test >= 1000 && test < 1000000){
return tick/1000 + "kHz";
}else if(test >= 1000000 && test < 1000000000){
return tick/1000000 + "MHz";
}else if(test >= 1000000000){
return tick/1000000000 + "GHz";
}else {
return tick.toString() + "Hz";
}
}
return '';
},
},
scaleLabel: {
labelString: 'Frequency',
display: true,
}
}]
}
}
});
但是我似乎无法定义起始点,所有的柱状图都起源于y-0。
我想知道是否有可能与chart .js,如果是这样,如何,因为我似乎无法在他们的文档或git中找到任何关于它的东西,谷歌也没有帮助。
这是我现在有的。
这是我想要的
到目前为止,唯一的方法似乎是将条形图与不可见的图表堆叠在x轴上作为填充(如这里所建议的),它工作得很好。
也可能有一个多轴的解决方案,正如@Arathi在评论中建议的。