如何將橫向滾動添加到chartjs中的條形圖？

我在Stackoverflow中嘗試了很多解決類似問題的解決方案，但他們都沒有工作，我也找不到任何解決方案。如何將橫向滾動添加到chartjs中的條形圖？

我應該如何讓條形圖中的每個項目具有最小寬度，這樣我纔能有一個水平滾動選項來查看數據。如果我不使用最小寬度，那麼所有行都會壓縮，UI看起來不太好。

我應該在新的Chart方法中添加樣式還是有其他方法？

這裏是我的代碼：

  <head> 

      <style type="text/css"> 

       .barcanvas 
       { 
       overflow-x: scroll; 
       } 

      </style> 

      </head> 
      <body> 


       <div style="width: 40%" id="bardiv"> 
       <canvas id="barcanvas"></canvas> 
       </div> 


      </body> 

     <script>  



       var barChartData = { 
        labels: ["January", "February", "March","April","May","January", "February", "March","April","May","January", "February", "March","Coon","May","Dude", "Etf", "March","April","May"], 
        datasets: [{ 
         label: 'Dataset 1', 
         backgroundColor: '#33b5e5', 
         data: [ 
          17, 
          11, 
          12, 
          13, 
          14, 
          17, 
          11, 
          12, 
          13, 
          14, 
          17, 
          11, 
          12, 
          13, 
          14, 
          17, 
          11, 
          12, 
          13, 
          14, 

          ] 
        }] 

       }; 



       window.onload = function() { 


        var ctx1 = document.getElementById("barcanvas").getContext("2d"); 
        window.myBar = new Chart(ctx1, { 
         type: 'bar', 
         data: barChartData, 
         options: { 
          title:{ 
           display:true, 
           text:"Bar Graph" 
          }, 
          tooltips: { 
           mode: 'index', 
           intersect: false 
          }, 
          responsive: true, 
          scales: { 
           xAxes: [{ 
            style: { 
            stacked: true, 
        }, 
           }], 
           yAxes: [{ 
            stacked: true 
           }] 
          } 
         } 
        }); 

        } 


     </script>

來源

2017-09-01 Anirudh

很好，好像你想使一個滾動的看法？
如何在原來的div和canvas之間添加一個包裝div，並給出該寬度？

var barChartData = { 
 
    labels: ["January", "February", "March", "April", "May", "January", "February", "March", "April", "May", "January", "February", "March", "Coon", "May", "Dude", "Etf", "March", "April", "May"], 
 
    datasets: [{ 
 
     label: 'Dataset 1', 
 
     backgroundColor: '#33b5e5', 
 
     data: [ 
 
      17, 
 
      11, 
 
      12, 
 
      13, 
 
      14, 
 
      17, 
 
      11, 
 
      12, 
 
      13, 
 
      14, 
 
      17, 
 
      11, 
 
      12, 
 
      13, 
 
      14, 
 
      17, 
 
      11, 
 
      12, 
 
      13, 
 
      14, 
 

 
     ] 
 
    }] 
 

 
}; 
 

 
var ctx1 = document.getElementById("barcanvas").getContext("2d"); 
 

 
window.myBar = new Chart(ctx1, { 
 
    type: 'bar', 
 
    data: barChartData, 
 
    options: { 
 
     title: { 
 
      display: true, 
 
      text: "Bar Graph" 
 
     }, 
 
     tooltips: { 
 
      mode: 'index', 
 
      intersect: false 
 
     }, 
 
     responsive: true, 
 
     scales: { 
 
      xAxes: [{ 
 
       style: { 
 
        stacked: true, 
 
       }, 
 
      }], 
 
      yAxes: [{ 
 
       stacked: true 
 
      }] 
 
     } 
 
    } 
 
});

.barcanvas 
 
       { 
 
       overflow-x: scroll; 
 
       }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script> 
 
<div style="width: 40%" id="bardiv"> 
 
    <div style="width: 1024px"> 
 
    <canvas id="barcanvas"></canvas> 
 
    </div> 
 
</div>

嗯....這是你想要？

來源

2017-09-04 03:51:03 Anami

如何將橫向滾動添加到chartjs中的條形圖？

回答

相關問題