Chart.js maximal bar Größe Balkendiagramm Einstellung

Question

Ich möchte die maximale Breite eines Balkendiagramms begrenzen

Mein CODE:

<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> 

Was die Art und Weise so

zu tun ist,

Es sieht so aus für Einzelwert

Die Größe des Balkens reduziert sich als die Anzahl der b ar erhöht Wie kann ich die maximale Balkengröße einstellen, um sie besser sichtbar zu machen?

Answer 1

können Sie neue Optionen hinzufügen, die von default.But nicht verfügbar sind Sie chart.js

In Chart.js fügen Sie diese Zeilen Code Schritt 1 bearbeiten müssen:

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

diese beiden Linie in defaultConfig von Bar hinzufügen

Diagramm Schritt 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); 
        } 

Fügen Sie diese Bedingung in calculateBarWidth Funktion von barchart

Jetzt können Sie BarWidth in benutzerdefinierten js Datei als Option von

isFixedWidth:true, 
barWidth:xx 

Einstellung Wenn Sie festen BarWidth nicht angeben mögen, nur isFixedWidth:false ändern

Answer 2

Haben Sie folgende Optionen ausprobiert?

{ 
    //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

Es ist ein bisschen spät, um dies zu beantworten, aber hoffe, das hilft jemand da draußen ... spielen mit barDatasetSpacing [fügt Abstand nach jedem Balken] und barValueSpacing [fügt Abstand vor jedem Balken] um Sie erreichen zu können r gewünschte Strichbreite .. Beispiel unten bei der Einleitung Ihres Balkendiagramm

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

Hoffen, es hilft ..

Answer 4

ich tat es durch Balkendiagramm erstreckt, und die Berechnung barValueSpacing dynamisch. Ich benutze Winkel chartjs

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); 
      } 
     });