在Chart.js中定义浮动水平条形图的y起点

Defining y-starting point for floating horizontal bar charts in Chart.js?

本文关键字:条形图 水平 起点 Chart js 定义      更新时间:2023-09-26

我创建了一个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在评论中建议的。