Vue ChartJS 轴刻度

时间:2021-07-06 18:51:44

标签: javascript vue.js chart.js

寻求有关为什么我的 y 轴比例选项被忽略的帮助。控制台中没有错误,但是 y 轴最小值仍然作为数据集中的最小值生成,在本例中为 24。

预期结果会将 y 轴最小值设置为零。

JS

Vue.component('bar-chart', {
    extends: VueChartJs.Bar,
    props: {
        labels: Array,
        datasets: Array,
        options: Object
    },
    mounted () {
        this.renderChart({
            labels: this.labels,
            datasets: this.datasets,
            options: this.options
        }, {responsive: true, maintainAspectRatio: false})
    }
})

const home = {
    template: '#home',
    data: function () {
        return {
            labels: ['06/04/21', '06/11/21', '06/18/21', '06/25/21', '07/02/21'],
            datasets: [
            {
                label: 'Count',
                backgroundColor: '#05a7ff',
                data: ['24', '24', '32', '32', '32']
                /*trendlineLinear: {
                    style: "rgb(43 ,66 ,255, 0.3)",
                    lineStyle: "dotted",
                    width: 2
                }*/
            },
            ],
            options: {
                responsive: true,
                legend: {
                    position: 'bottom',
                },
                plugins: {
                    datalabels: {},
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            min: 0,
                            beginAtZero: true
                        }
                    }]
                }
            }
        }
    }
}

HTML

<template id="home">
    <bar-chart :labels="labels" :datasets="datasets" :options="options"></bar-chart>
</template>

0 个答案:

没有答案