Chart.js thiết lập kích thước thanh tối đa của biểu đồ thanh

Question

Tôi muốn giới hạn chiều rộng tối đa của một biểu đồ thanh

MÃ My:

<script> 
     // bar chart data 
     var a=[]; 
      a.push('kalai 2015-04-11'); 
     var b=[]; 
      b.push('300'); 
     var barData = { 
      labels : a, 

      datasets : [ 
       { 
        fillColor : "#48A497", 
        strokeColor : "#48A4D1", 
        data : b 

       } 
      ] 
     } 
     // get bar chart canvas 
     var income = document.getElementById("income").getContext("2d"); 
     // draw bar chart 
     new Chart(income).Bar(barData, {scaleGridLineWidth : 1}); 
     <!--new Chart(income).Bar(barData);--> 
    </script> 

cách để làm như vậy

là gì

Dường như điều này có giá trị đơn

Kích thước của thanh giảm khi số lượng b ar tăng Làm cách nào tôi có thể đặt kích thước thanh tối đa để làm cho nó có thể xem nhiều hơn

Answer 1

Bạn có thể thêm tùy chọn mới, mà không có sẵn bởi default.But bạn cần phải chỉnh sửa chart.js

Trong Chart.js thêm các dòng mã Bước 1:

//Boolean - Whether barwidth should be fixed 
     isFixedWidth:false, 
     //Number - Pixel width of the bar 
     barWidth:20, 

Thêm hai dòng này trong defaultConfig của Bar Chart

Bước 2:

calculateBarWidth : function(datasetCount){ 

        **if(options.isFixedWidth){ 
         return options.barWidth; 
        }else{** 
         //The padding between datasets is to the right of each bar, providing that there are more than 1 dataset 
         var baseWidth = this.calculateBaseWidth() - ((datasetCount - 1) * options.barDatasetSpacing); 
          return (baseWidth/datasetCount); 
        } 

Thêm điều kiện này trong calculateBarWidth chức năng của barchart

Bây giờ bạn có thể đặt barWidth trong tập tin tùy chỉnh js như tùy chọn bằng cách thiết lập

isFixedWidth:true, 
barWidth:xx 

Nếu bạn không muốn chỉ định barwidth cố định, chỉ cần thay đổi isFixedWidth:false

Answer 2

Bạn đã thử các tùy chọn sau chưa?

{ 
    //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value 
    scaleBeginAtZero : true, 

    //Boolean - Whether grid lines are shown across the chart 
    scaleShowGridLines : true, 

    //String - Colour of the grid lines 
    scaleGridLineColor : "rgba(0,0,0,.05)", 

    //Number - Width of the grid lines 
    scaleGridLineWidth : 1, 

    //Boolean - Whether to show horizontal lines (except X axis) 
    scaleShowHorizontalLines: true, 

    //Boolean - Whether to show vertical lines (except Y axis) 
    scaleShowVerticalLines: true, 

    //Boolean - If there is a stroke on each bar 
    barShowStroke : true, 

    //Number - Pixel width of the bar stroke 
    barStrokeWidth : 2, 

    //Number - Spacing between each of the X value sets 
    barValueSpacing : 5, 

    //Number - Spacing between data sets within X values 
    barDatasetSpacing : 1, 

    //String - A legend template 
    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>" 

} 

Answer 3

Sẽ muộn để trả lời câu hỏi này nhưng hy vọng điều này giúp ai đó ... chơi xung quanh với barDatasetSpacing [thêm khoảng cách sau mỗi thanh] và barValueSpacing [thêm khoảng cách trước mỗi thanh] để có thể đạt được bạn r mong muốn thanh chiều rộng .. ví dụ dưới đây khi bắt đầu biểu đồ thanh của bạn

... barDatasetSpacing:10, barValueSpacing:30, ... 

Hy vọng nó giúp ..

Answer 4

tôi đã làm nó bằng cách mở rộng Biểu đồ thanh và tính barValueSpacing động. Tôi sử dụng chartjs góc

var MAX_BAR_WIDTH = 50; 
Chart.types.Bar.extend({ 
      name: "BarAlt", 
      draw: function(){ 
       var datasetSize = n // calculate ur dataset size here 
       var barW = this.chart.width/datasetSize; 
       if(barW > MAX_BAR_WIDTH){ 
       this.options.barValueSpacing = Math.floor((this.chart.width - (MAX_BAR_WIDTH * datasetSize))/datasetSize); 
       } 
       Chart.types.Bar.prototype.draw.apply(this, arguments); 
      } 
     });