Charts.js 50条以上的横条如何固定高度

Question

如何修复我的图表，问题是我有很多水平条，所以图表坏了。

var barOptions_stacked = {
    tooltips: {
        enabled: false
    },
    hover :{
        animationDuration:0
    },
    scales: {
        xAxes: [{
            ticks: {
                beginAtZero:true,
                fontFamily: "'Open Sans Bold', sans-serif",
                fontSize:11
            },
            scaleLabel:{
                display:false
            },
            gridLines: {
            }, 
            stacked: true
        }],
        yAxes: [{
            gridLines: {
                display:false,
                color: "#fff",
                zeroLineColor: "#fff",
                zeroLineWidth: 0
            },
            ticks: {
                fontFamily: "'Open Sans Bold', sans-serif",
                fontSize:11
            },
            stacked: true
        }]
    },
    legend:{
        display:false
    },

};

var ctx = document.getElementById("Chart1");
var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ["2014", "2013", "2012", "2011","2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011"],
        
        datasets: [{
            data: [727, 589, 537, 543, 574],
            backgroundColor: "rgba(63,103,126,1)",
            hoverBackgroundColor: "rgba(50,90,100,1)"
        }]
    },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js"></script>

  <div class="graph_container">
    <canvas id="Chart1"></canvas>
  </div>

我尝试过使用卷轴，但效果不佳。因为条形太小，无法阅读

最好的解决方案是什么？有什么建议吗？

Answer 1

您可以将 canvas 放在 div 中并使 div 可滚动。然后增加canvas.

的高度

为了使滚动：

<div style="overflow-y: scroll; height:400px;">

Answer 2

我终于修好了，我用的是这个解决方案：

https://jsfiddle.net/jbfLuo53/

解决方法是在js文件中控制高度大小，使用Jquery设置。

Charts.js 50条以上的横条如何固定高度

Charts.js how to fix the height with more than 50 horizontal bars

css

chart.js