Chart.js: rozstaw bar na wykresie poziomy pasek

Question

horizontal bar chart

var barOptions_stacked1 = { 
 
       tooltips: { 
 
        enabled: true 
 
       }, 
 
       hover: { 
 
        animationDuration: 0 
 
       }, 
 
       scales: { 
 
        xAxes: [{ 
 
          ticks: { 
 
           beginAtZero: true, 
 
           fontFamily: "'Open Sans Bold', sans-serif", 
 
           fontSize: 11 
 
          }, 
 
          scaleLabel: { 
 
           display: false 
 
          }, 
 
          gridLines: { 
 
          }, 
 
          stacked: true 
 
         }], 
 
        yAxes: [{ 
 
          barThickness: 20, 
 
          gridLines: { 
 
           display: false, 
 
           color: "#fff", 
 
           zeroLineColor: "#fff", 
 
           zeroLineWidth: 0 
 
          }, 
 
          ticks: { 
 
           fontFamily: "'Open Sans Bold', sans-serif", 
 
           fontSize: 11 
 
          }, 
 
          stacked: true 
 
         }] 
 
       }, 
 
       legend: { 
 
        display: true 
 
       }, 
 
       pointLabelFontFamily: "Quadon Extra Bold", 
 
       scaleFontFamily: "Quadon Extra Bold" 
 
      }; 
 
      var ctx1 = document.getElementById("Chart1"); 
 
      var myChart1 = new Chart(ctx1, { 
 
       type: 'horizontalBar', 
 
       data: { 
 
        labels: ["BU 5", "BU 4", "BU 3", "BU 2", "BU 1"], 
 
        datasets: [{ 
 
          data: [727, 589, 537, 543, 574], 
 
          backgroundColor: "rgba(63,103,126,1)", 
 
          hoverBackgroundColor: "rgba(50,90,100,1)", 
 
          label: "newly request" 
 
         }, { 
 
          data: [238, 553, 746, 884, 903], 
 
          backgroundColor: "rgba(163,103,126,1)", 
 
          hoverBackgroundColor: "rgba(140,85,100,1)", 
 
          label: "in progress" 
 
         }, { 
 
          data: [1238, 553, 746, 884, 903], 
 
          backgroundColor: "rgba(63,203,226,1)", 
 
          hoverBackgroundColor: "rgba(46,185,235,1)", 
 
          label: "active" 
 
         }, { 
 
          data: [1338, 553, 746, 884, 903], 
 
          backgroundColor: "rgba(255,169,188,1)", 
 
          hoverBackgroundColor: "rgba(255,99,132,1)", 
 
          label: "in approval" 
 
         }, { 
 
          data: [1438, 553, 746, 884, 903], 
 
          backgroundColor: "rgba(136,202,247,1)", 
 
          hoverBackgroundColor: "rgba(54,162,235,1)", 
 
          label: "recycle" 
 
         }, { 
 
          data: [1538, 553, 746, 884, 903], 
 
          backgroundColor: "rgba(196,232,116,1)", 
 
          hoverBackgroundColor: "rgba(152,177,98,1)", 
 
          label: "reject" 
 
         }] 
 
       }, 
 
       options: barOptions_stacked1 
 
      });

<canvas id="Chart1"></canvas>

Jak zmniejszyć odstęp między kratkami. Próbowałem categorySpacing, barValueSpacing ... Ale nic nie działa! Wygląda dobrze na małej szerokości, ale przy pełnej szerokości ekranu wysokość zwiększa się ze względu na odstępy między prętami. Inline css for canvas nie działa, ponieważ jest nadpisany domyślnie chartjs. Nie mogę również ustawić wysokości wykresu podczas inicjalizacji wykresu: ctx1.canvas.height = 300; To nie działa! jsfiddle Link link

Answer 1

rozstaw Bar mogą być usunięte przez ustawienie zarówno barPercentage i categoryPercentage do 1:

yAxes: [{ 
    barPercentage: 1.0, 
    categoryPercentage: 1.0, 
}], 

Jednak barThickness wydaje się zastąpić te ustawienia. Jedynym rozwiązaniem, które znalazłem, jest ustawienie wysokości elementu nadrzędnego wykresu na stałą wartość, ustawienie opcji maintainAspectRatio na false i usunięcie opcji barThickness.

UWAGA: Używam skośnych chart.js

Answer 2

chart.js import plików .there plik biblioteki brakuje dlatego błąd przyjść. https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js