biểu đồ thanh ngang trong chart.js

Question

Tôi cố gắng để vẽ một biểu đồ thanh ngang bằng chart.js 2.3.0 -

var MeSeContext = document.getElementById("MeSeStatusCanvas").getContext("2d"); 
    var MeSeData = { 
     labels: [ 
      "ME", 
      "SE" 
     ], 
     datasets: [ 
      { 
       label: "Test", 
       data: [100, 75], 
       backgroundColor: ["#669911", "#119966" ], 
       hoverBackgroundColor: ["#66A2EB", "#FCCE56"] 
      }] 
    }; 

var MeSeChart = new Chart(MeSeContext, { 
    type: 'horizontalBar', 
    data: MeSeData, 
    options: { 
     scales: { 
      yAxes: [{ 
       stacked: true 
      }] 
     } 

    } 
}); 

Nhưng nó chỉ hiển thị một vạch. Tôi đã bỏ lỡ điều gì ở đây?

Answer 1

Bạn chỉ có thể xem một biểu đồ vì giá trị thấp nhất của dữ liệu của bạn (75 ở đây) là giới hạn trái của thang đo.

Như được hiển thị trong ảnh chụp màn hình sau đây của kết quả mã của bạn, nếu bạn di chuột trên thang tỷ lệ, bạn vẫn có thể thấy dữ liệu được liên kết, có nghĩa là dữ liệu ở đây.

---

Bạn có hai cách để sửa lỗi này:

• Đặt min tài sản của XScale tick để giá trị mà bạn muốn (đủ để nhìn thấy nó tất nhiên):

  var MeSeChart = new Chart(MeSeContext, { 
      type: 'horizontalBar', 
      data: MeSeData, 
      options: { 
       scales: { 
        xAxes: [{ 
         ticks: { 
          min: 60 // Edit the value according to what you need 
         } 
        }], 
        yAxes: [{ 
         stacked: true 
        }] 
       } 
      } 
  }); 
  

  Bạn có thể xem kết quả bằng min thiết lập để 60 on this jsFiddle:

  

• Đặt beginAtZero tài sản để true, mà cũng giống như việc thiết min-0:

  xAxes: [{ 
      ticks: { 
       beginAtZero: true 
      } 
  }], 
  

  Bạn có thể xem kết quả với các thiết lập beginAtZero bất động sản đến trueon this jsFiddle.