时间戳

首页 > 解决方案 > Chart.js 具有可滚动溢出的图表的最小宽度

javascript - Chart.js 具有可滚动溢出的图表的最小宽度

问题描述

我正在制作一个网站，以便我和我的朋友可以比较一些统计数据。我正在使用 Chart.js 来显示这些统计信息。整个网站是使用 Bootstrap 制作的。我注意到当添加大量用户时，条形图会变得更小以适应屏幕上的所有内容，但是我希望条形图保持最小尺寸并在达到最小值时溢出屏幕。然而，这个溢出应该仍然是可滚动的。

有什么办法可以做到这一点？

HTML（在主体内的容器 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'
        }
    }
});

标签： javascripthtmlcsschart.js

解决方案

猜猜你最好的床是利用这个插件来滚动你的图表。 https://github.com/chartjs/chartjs-plugin-zoom

推荐阅读