在Chart.js中定义浮动水平条形图的y起点
Defining y-starting point for floating horizontal bar charts in Chart.js?
我创建了一个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在评论中建议的。
相关文章:
- 用chart.js绘制条形图
- ZingCharts水平堆叠条形图X轴标签被切断
- 水平条形图上的文本 - d3
- Highcharts 单个水平堆叠条形图,始终显示数据名称(标签)和 %-年龄,并在鼠标悬停时显示数据编号和系列名称
- 在高图表水平条形图中显示所有标签
- 水平条形图 y 轴对齐方式
- JQplot-只有两个事实的堆叠水平条形图
- JQPlot渲染垂直堆叠条形图和水平图例时出现问题
- HighCharts:水平条形图的对数刻度
- 使用D3使滑块在水平条形图上工作
- D3水平条形图
- 在D3中将堆叠条形图的方向从垂直改为水平
- 水平条形图D3, .txt文件
- D3js -改变垂直条形图水平条形图
- 水平堆叠条形图
- D3水平条形图的精确副本
- 如何创建一个水平堆叠条形图,条形图上的标签以及条形图上方的标签
- jqPlot水平条形图点标签挑战
- 有没有一种方法可以为使用小控件制作的条形图添加水平滚动条
- 在Chart.js中定义浮动水平条形图的y起点