Chart.js - Viết nhãn bên trong các thanh ngang?

Question

Trong Chart.js, có cách nào để viết nhãn bên trong các thanh ngang trong biểu đồ "horizontalBar" không? Như trong một cái gì đó như:

là bất cứ điều gì tương tự như khả năng này trong Chart.js?

Cảm ơn!

Answer 1

Hiện nay, vào tùy chọn "gương" để làm cho nhãn xuất hiện bên trong thanh.

Ví dụ về "lựa chọn" cấu hình cho một biểu đồ horizontalBar:

options: { 
    scales: { 
     yAxes: [{ticks: {mirror: true}}] 
    } 
} 

Đốc: http://www.chartjs.org/docs/latest/axes/cartesian/#common-configuration

Answer 2

Có vẻ như không có tùy chọn trực tiếp cho điều này ngay bây giờ. Việc triển khai có thể lặp lại trên các thanh/cột bằng cách sử dụng hook onAnimationComplete. Bạn có thể xem câu hỏi này để được giải thích chi tiết how to display data values on Chart.js

Tôi muốn bạn nhắc nhở rằng điều này có nhược điểm. Vì nó sử dụng onAnimationComplete, bất cứ khi nào một hoạt ảnh xuất hiện trên biểu đồ, các giá trị sẽ biến mất trong một giây và xuất hiện lại.

Answer 3

Với tham chiếu đến original solution to displaying data value bằng cách sử dụng HTML5 Canvas fillText() phương pháp trong 's onCompleteanimation, mã dưới đây sẽ giúp bạn có được những gì bạn cần:

Chìa khóa để tùy chỉnh hiển thị bất kỳ dữ liệu biểu đồ liên quan được kiểm tra bảng xếp hạng của tập dữ liệu như trong this.data.datasets bên dưới. Tôi đã làm điều này bằng cách kiểm tra nơi các giá trị khác nhau nằm trong tập dữ liệu này, cũng như vị trí đặt chúng cho phương thức fillText.

Kiểm tra dữ liệu của biểu đồ: Image

Script (Chart.js 2.0 & lên):

var barOptions = { 
     events: false, 
     showTooltips: false, 
     legend: { 
     display: false 
     }, 
     scales:{ 
     yAxes: [{ 
      display: false 
     }] 
     }, 
     animation: { 
     onComplete: function() { 
      var ctx = this.chart.ctx; 
      ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily); 
      ctx.textAlign = 'left'; 
      ctx.textBaseline = 'bottom'; 

      this.data.datasets.forEach(function (dataset) { 
      for (var i = 0; i < dataset.data.length; i++) { 
       var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model, 
        left = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.left; 
       ctx.fillStyle = '#444'; // label color 
       var label = model.label; 
       ctx.fillText(label, left + 15, model.y + 8); 
      } 
      });    
     } 
     } 
    }; 

jsFiddle: http://jsfiddle.net/jfvy12h9/

Answer 4

Bạn có thể đạt được hiệu ứng này trong chartjs 2.0 + bằng cách xoay nhãn 90 độ và áp dụng đệm tiêu cực , để nhãn di chuyển lên trong 'thanh'. Một cái gì đó như thế này:

new Chart(document.getElementById(id), { 
    type: 'bar', 
    data: data, 
    options: { 
    scales: { 
     xAxes: [ 
     { 
      ticks: { 
      autoSkip: false, 
      maxRotation: 90, 
      minRotation: 90, 
      padding: -110 
      } 
     } 
     ] 
    } 
    } 
}); 

Xem tick configuration documentation để biết thêm thông tin.