Chart.js: khoảng cách giữa các thanh trong biểu đồ thanh ngang

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>

Làm thế nào để giảm khoảng cách giữa các thanh. Tôi đã thử loạiPhân cách, thanhVị trí ... Nhưng không có gì hoạt động! Dường như có chiều rộng nhỏ, nhưng khi chiều rộng toàn màn hình, chiều cao của nó tăng do khoảng cách giữa các thanh. Css nội tuyến cho canvas không hoạt động vì nó được ghi đè bằng biểu đồ mặc định. Ngoài ra, tôi không thể đặt chiều cao biểu đồ trong khi khởi tạo biểu đồ: ctx1.canvas.height = 300; Nó không hoạt động! liên kết jsfiddle link

Answer 1

Bar khoảng cách có thể được gỡ bỏ bằng cách thiết lập cả barPercentage và categoryPercentage-1:

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

Tuy nhiên, barThickness dường như để ghi đè lên các thiết lập này. Giải pháp duy nhất tôi tìm thấy là đặt chiều cao của phần tử gốc của biểu đồ thành giá trị cố định, đặt maintainAspectRatio tùy chọn false và xóa tùy chọn barThickness.

LƯU Ý: Tôi đang sử dụng angular-chart.js

Answer 2

Nhập tệp biểu đồ.js .các tệp thư viện khác thiếu lý do lỗi xảy ra. https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js