Question

我创建了一个带有对数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。

我想知道是否有可能使用Charts.js，如果是这样，如何，因为我似乎无法在他们的文档或他们的git中找到任何关于它的东西，Googling没有帮助任

Here is what I have right now.

Here is what I would like to have.

Answer 1

目前唯一的方法似乎是将条形图与不可见的图表堆叠在一起作为x轴上的填充（如建议的here），它的效果非常好。

可能还有一个多轴解决方案，正如评论中@Arathi所建议的那样。

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

1 个答案: