2017-09-01 26 views
2

私は同様の質問のために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> 

答えて

0

も、そうですか?
オリジナルのdivcanvasの間にラベラーdivを追加すると、その1つの幅がわかりますか?

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>

うーん....あなたが欲しい、これはあります?

関連する問題