Chart.js收缩

klsxnrf1  于 2023-03-12  发布在  Chart.js
关注(0)|答案(1)|浏览(186)

使用chart.js时出现了一个新问题。我的图表开始神秘地缩小到什么都没有。看起来像是chart.js中引入的一个新错误。这种缩小效果显然不是有意或想要的。

var scanCountChart = new Chart("ScanCountChart", {
        type: "bar",
        data: {
            labels: xVals,
            datasets: [{
                backgroundColor: barColors,
                data: yVals
            }]
        },
        options: {
            plugins: {
                tooltip: {
                    titleFont: {
                        size: 50
                    },
                    bodyFont: {
                        size: 30
                    },
                    footerFont: {
                        size: 15 // there is no footer by default
                    }
                },
                legend: { display: false },
                zoom: {
                    limits: {
                        y: { min: 0, max: 100 },
                        y2: { min: -5, max: 5 }
                    },
                }
            },
            scales: {
                x: {
                    ticks: {
                        font: {
                            size: xFontSize
                        },
                        maxRotation: 45,
                        minRotation: 25
                    }
                },
                y: {
                    ticks: {
                        font: {
                            size: yFontSize
                        }
                    }
                }
            }
        }
    });
b4qexyjb

b4qexyjb1#

回答自己的问题。解决方案似乎是添加maintainAspectRatio:错。

var scanCountChart = new Chart("ScanCountChart", {
    type: "bar",
    data: {
        labels: xVals,
        datasets: [{
            backgroundColor: barColors,
            data: yVals
        }]
    },
    options: {
maintainAspectRatio: false,  // *** Important : this is required or a strange vanishing zoom out effect occurs with the graph. 
        plugins: {
            tooltip: {
                titleFont: {
                    size: 50
                },
                bodyFont: {
                    size: 30
                },
                footerFont: {
                    size: 15 // there is no footer by default
                }
            },
            legend: { display: false },
            zoom: {
                limits: {
                    y: { min: 0, max: 100 },
                    y2: { min: -5, max: 5 }
                },
            }
        },
        scales: {
            x: {
                ticks: {
                    font: {
                        size: xFontSize
                    },
                    maxRotation: 45,
                    minRotation: 25
                }
            },
            y: {
                ticks: {
                    font: {
                        size: yFontSize
                    }
                }
            }
        }
    }
});

相关问题