Question

以下是

的示例

我目前使用chartjs有这个图表结构：

scales: {
                xAxes: [
                    {
                        display: true,
                        labels: {
                            show: true
                        },
                        stacked: true
                    }
                ],
                yAxes: [
                    {
                        type: 'linear',
                        display: true,
                        position: 'left',
                        id: 'y-axis-1',
                        gridLines: {
                            display: false
                        },
                        labels: {
                            show: true
                        },
                        stacked: true,
                        ticks: {
                            beginAtZero: true
                        }
                    }
                ]
            }

我希望我的xAxis能够固定在我的yAxis 0位置，我一直在谷歌搜索所有文件并阅读所有文件：http://www.chartjs.org/docs/#scales没有任何发现：/

编辑：问题发布在chartjs github https://github.com/chartjs/Chart.js/issues/4229

上编辑：坏消息，目前不可能，问题已关闭且重复 https://github.com/chartjs/Chart.js/issues/2950

Answer 1

我需要完全一样的东西，然后决定自己编写代码，希望对别人有帮助

使用CSS作为用例，如果需要进一步的帮助，请发表评论

注意：我的图表画布必须比其父容器（移动;）宽，并且应该具有水平滚动，但是刻度线不可见，现在固定在左侧

CSS

div#ticks {
    position: fixed;
    font-size: 11px;
    pointer-events: none;
    background: white;
}
div#ticks > span {
    display: block;
    position: absolute;
    padding: 0 5px;
    font-weight: 300;
    transform: translate(-50%,-2.6px);
    left: 50%;
}

JavaScript

Chart.prototype.makeTicks = function() {
    var box = this.boxes[3];//This is canvas element with id#y-axis-0
    var lineHeight = (box.bottom-box.top)/(box.ticksAsNumbers.length-1);
    if (this.ticksDiv) {
        this.ticksDiv.remove();
        delete this.ticksDiv;
    }
    this.ticksDiv = document.createElement('div');
    this.ticksDiv.id = 'ticks';
    this.ticksDiv.innerHTML = '';
    this.ticksDiv.style.width = box.width+'px';
    this.ticksDiv.style.height = Math.ceil(box.bottom+2.6)+'px';
    box.ticksAsNumbers.forEach((tick,i)=>{
        var spn = document.createElement('span');
        spn.style.top = (i*lineHeight)+'px';
        spn.innerHTML = tick;
        this.ticksDiv.appendChild(spn);
    });
    this.canvas.parentNode.insertBefore(this.ticksDiv,this.canvas);
}

然后

var chart = new Chart(ctx, {
    plugins: [{
        afterLayout: function(chart) {
            chart.makeTicks();
        }
    }],
    ...

Chart.js我想将我的xAxis修复到我的yAxis位置0

1 个答案: