Chart.js 具有可滾動溢出的圖表的最小寬度

Question

我正在制作一個網站，以便我和我的朋友可以比較一些統計數據。 我正在使用 Chart.js 來顯示這些統計信息。 整個網站是使用 Bootstrap 制作的。 我注意到當添加大量用戶時，條形圖會變得更小以適應屏幕上的所有內容，但是我希望條形圖保持最小尺寸並在達到最小值時溢出屏幕。 然而，這個溢出應該仍然是可滾動的。

有什么辦法可以做到這一點？

HTML（在body里面的容器div里面）：

<div class="row"> 
    <canvas id="stats" height="200"></canvas>
</div><br>

（我注意到高度沒有太大作用）

JavaScript：

new Chart(document.getElementById('stats').getContext('2d'), {
    type: 'bar',
    data: {
        labels: usernames,
        datasets: [{
            label: 'stats1',
            backgroundColor: 'rgb(158, 0, 0)',
            borderColor: 'rgb(135, 0, 0)',
            data: [10, 43]
        }, {
            label:'stats2',
            backgroundColor: 'rgb(0, 38, 120)',
            borderColor: 'rgb(0, 28, 89)',
            data: [10, 43]
        }]
    },
    options: {
        scales: {
            yAxes: [{
                display: true,
                ticks: {
                    suggestedMin: 0
                }
            }]
        },
        title: {
            display: true,
            text: 'Stats'
        }
    }
});

Answer 1

猜猜你最好的床是利用這個插件來滾動你的圖表。 https://github.com/chartjs/chartjs-plugin-zoom