Cách thêm trục Y thứ hai cho biểu đồ Thanh và Đường trong Chart.js?

Question

Tôi đang cố gắng thêm trục Y hai trong Chart.js để so sánh hai tập dữ liệu. Tôi hiện đang sử dụng phần mở rộng LineBar của Leigh Quince là câu trả lời được tìm thấy ở đây: Chart.js how to get Combined Bar and line charts?

Ngoài ra còn có một giải pháp được viết khoảng một năm trước cho trục Y đôi nhưng chỉ cho biểu đồ dạng đường. Nick của chủ nhân. Có vẻ như có cả biểu đồ Đường và Thanh hoặc Double-Y nhưng không phải cả hai.

Vấn đề của tôi ở đây là tôi cần đại diện cho TSAT% (mức độ bão hòa), trục Y bên trái, Biểu đồ đường, với số lượng mức độ Ferritin, Biểu đồ thanh Y trục bên phải. Đây là những gì tôi cần nó để trông giống như:

(Có vẻ Stackoverflow đã thay đổi màu sắc của nó trên tôi, hy vọng bạn vẫn có thể đọc các Y-Axis quy mô)

Nếu ai đó có thể comp lên với một giải pháp tôi sẽ được đánh giá rất cao.

đang hiện tại:

  var data = { 
       labels: ["Jun 2013", "Jul 2013","Aug 2013","Sep 2013","Oct 2013","Nov 2013","Dec 2013", "Jan 2014", "Feb 2014", "Mar 2014", "Apr 2014", "May 2014"], 
       datasets: [ 

        { 
         label: "TSAT", 
         type: "line", 
         fillColor: "transparent", 
         strokeColor: "#a33a59", 
         pointColor: "#a33a59", 
         pointHighlightStroke: "#FFF", 
         data:[33,32.9,32.9,33.2,33.2,33.2,32.7,32.9,32.9,32.7,32.7,32.7] 
        },     
        { 
         label: "Ferritin", 
         type: "bar", 
         fillColor: "#ed7141", 
         strokeColor: "#ed7141", 
         data: [939,929,949,991,992,993,976,976,973,986,972,939] 
        } 
       ] 
      }; 

      var options = { 
       responsive: true, 
       scaleOverride: true, 
       scaleSteps: 10, 
       scaleStepWidth: 5, 
       scaleStartValue: 0, 
       showTooltips: false, 
       pointDot: true, 
       pointDotRadius : 10, 
       datasetStrokeWidth : 3, 
       bezierCurve : false, 
       scaleShowLines: false, 
       scaleGridLineWidth : 2, 
       scaleGridLineColor : "#EEEEEE", 
       scaleLineWidth: 3, 
       scaleLineColor: "#000000", 
       scaleFontFamily: 'Gotham Book,sans-serif', 
       scaleFontSize: 18, 
      } 

      ctx = $("#myChart").get(0).getContext("2d"); 
      TSATChart = new Chart(ctx).LineBar(data, options);  

BTW ... Tôi sửa đổi LineBar Quince của để render Bar đầu tiên sau đó dòng. Mã ban đầu đã đảo ngược nó. Như vậy, tôi có thể không thể thêm một cái gì đó vào jsfiddle, tôi sẽ chỉnh sửa và thêm một liên kết nếu tôi thành công với việc thêm một ví dụ ở đó.

Cảm ơn bạn!

Answer 1

Để hiển thị một biểu đồ đường thẳng với hai trục Y, @khertan làm một yêu cầu kéo thêm tính năng này >>https://github.com/nnnick/Chart.js/pull/1355

Bạn có thể lấy file Chart.js chỉnh tại đây >>https://github.com/khertan/Chart.js/tree/9edcc71f97361bb45c8fe93d07acb1917c2b4807

Bạn' sẽ chỉ cần thêm tùy chọn để biến options của bạn:

var options = { 
    ... 
    scaleUse2Y: true, 
    ... 
}; 

Và sau đó nhanh chóng một Biểu đồ dạng đường bình thường:

var chart = new Chart(ctx).Line(data, options); 

Vấn đề là nếu bạn đang sử dụng một phần mở rộng như StackedBar, ví dụ, nó có thể sẽ phá vỡ ... Đó phải là lý do tại sao nó chưa được hợp nhất với chi nhánh của Chart.js của chủ. Kiên nhẫn cho bản phát hành phiên bản 2.0.