Chart.js ustawienie maksymalnej wielkości słupkowy wykres słupkowy

Question

Chcę ograniczyć maksymalną szerokość wykresie słupkowym

mój kod:

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

Jaki jest sposób aby to zrobić

Wygląda to tak dla pojedynczej wartości

Rozmiar paska zmniejsza się jako liczba b ar increase Jak ustawić maksymalny rozmiar paska, aby był bardziej widoczny

Answer 1

Można dodać nowe opcje, które nie są dostępne przez default.But trzeba edytować chart.js

W Chart.js dodać te linie kodu Krok 1:

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

dodać te dwie linie w defaultConfig barskiej wykres

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

Dodaj ten warunek w funkcji calculateBarWidth z BarChart

Teraz można ustawić barWidth w niestandardowy plik js jako opcja ustawiając

isFixedWidth:true, 
barWidth:xx 

Jeśli nie chcesz, aby określić stałą barwidth, wystarczy zmienić isFixedWidth:false

Answer 2

Czy próbowałeś następujących opcji?

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

Trochę za późno, żeby odpowiedzieć na to pytanie, ale mam nadzieję, że to pomoże komuś na zewnątrz ... bawić się z barDatasetSpacing [dodaje odstępy po każdym takcie] i barValueSpacing [dodaje odstępy przed każdym taktem], aby móc cię osiągnąć r pożądane Szerokość .. Poniższy przykład podczas rozpoczynania Twój wykres słupkowy

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

Nadzieja to pomaga ..

Answer 4

Zrobiłem to poprzez rozszerzenie wykresie słupkowym i obliczania barValueSpacing dynamicznie. Używam kątowych 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); 
      } 
     });