vue.js - 在 vuechart.js Horizo​​ntalBar 中将默认值设置为 0

Question

我正在制作一个 vuechart.js 水平条形图，我希望将最小值/默认值设置为 0。不过，我是个菜鸟。所以我不知道我是否正确地编写了“选项”。我尝试了一些东西，但似乎对 axys 没有任何影响。

我最近的尝试：

export default ({
extends: HorizontalBar,
props: ['agentTickets', 'options'],
mounted() {
    this.renderChart({
        labels: ['Ferry', 'Carlo', 'Menno', 'Scott'],   
        datasets: [{
            label: 'Yeet', backgroundColor: 'black', data: [10, 20, 30, 40]
        }]     
    }, 
    {
        responsive: true, maintainAspectRatio: false
    },
    {
        scales: {
        xAxes: [{
            ticks: {
                beginAtZero: true,
            },
            stacked: true
        }],
        yAxes: [{
            ticks: {
                beginAtZero: true,
            },
            stacked: true
        }]
        },
    })
}    
})

我的另一个尝试：

export default {
extends: HorizontalBar,
props: ['agentTickets', 'options'],
mounted() {
    this.renderChart({
        labels: ['Ferry', 'Carlo', 'Menno', 'Scott'],   
        scales: {
                xAxes: [{
                    ticks: {
                        beginAtZero: true,
                    },
                    stacked: true
                }],
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                    },
                    stacked: true
                }]
        },
        datasets: [
            {label: 'Yeet', backColor: 'black', data: [10, 20, 30, 40]}
        ]     
    }, {responsive: true, maintainAspectRatio: false})

}    
}

还有一个只是因为！

export default {
extends: HorizontalBar,
props: ['agentTickets', 'options'],
mounted() {
    this.renderChart({
        labels: ['Ferry', 'Carlo', 'Menno', 'Scott'],   
        options: {
            scale: {
                xAxes: [{
                    ticks: {
                        min: 0,
                    },
                    stacked: true
                }],
                yAxes: [{
                    ticks: {
                        min: 0,
                    },
                    stacked: true
                }]
            }
        },
        datasets: [
            {label: 'Yeet', backdropColor: 'black', data: [10, 20, 30, 40]}
        ]     
    }, {responsive: true, maintainAspectRatio: false})

}    
}

（我也尝试过使用 beginAtZero 的最新示例）

以上是当前结果，我想要的是一个从 0 开始的图表，而不是 10。

标签： vue.jschart.jsvue-chartjs

Answer 1

固定的。显然，选项已经创建（其中定义了响应和维护AspectRatio）。只需复制那些卷曲护腕之间的刻度就可以了！