Jak dodać drugą oś Y do wykresu słupkowego i liniowego w Chart.js?

Question

Próbuję dodać podwójną oś Y w Chart.js dla dwóch porównań zestawów danych. Obecnie używam rozszerzenia LineBar Leigh Quince, które znalazłem tutaj: Chart.js how to get Combined Bar and line charts?

Istnieje również rozwiązanie napisane około rok temu dla podwójnej osi Y, ale tylko dla wykresów liniowych, a ich sposób zsynchronizowany z Mistrz Nicka. Wydaje się, że istnieją wykresy liniowe i słupkowe, lub Double-Y, ale nie oba.

Moim problemem jest to, że muszę reprezentować TSAT% (poziomy nasycenia), lewą oś Y, wykres liniowy, do poziomu poziomów dawkowania ferrytyny, prawą oś poprzeczną osi Y. Oto, co potrzebne, aby wyglądać tak:

(Wydaje Stackoverflow zmieniła kolor na mnie, mam nadzieję, można jeszcze odczytać Wagi oś Y)

Jeśli ktoś może comp górę dzięki rozwiązaniu byłbym bardzo wdzięczny.

Aktualny kod:

  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 ... I zmodyfikowane pigwa za LineBar do renderowania Bar pierwszy wtedy linie. Kod początkowo był odwrócony. W związku z tym może nie być w stanie dodać coś do jsfiddle, będę edytować i dodać link, jeśli uda mi się dodać przykład.

Dziękujemy!

Answer 1

Aby wyświetlić wykres liniowy z dwoma osi Y @khertan złożyła wniosek rozwijane, aby dodać tę funkcję >>https://github.com/nnnick/Chart.js/pull/1355

można pobrać plik zmodyfikowany Chart.js tutaj >>https://github.com/khertan/Chart.js/tree/9edcc71f97361bb45c8fe93d07acb1917c2b4807

You” ll wystarczy dodać opcję do zmiennej options:

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

a potem wystąpienia normalnego wykresu liniowego:

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

Problem polega na tym, że jeśli używasz rozszerzenia takiego jak StackedBar, prawdopodobnie zostanie przerwane ... To musi być powód, dla którego nie został jeszcze połączony z odgałęzieniem Master of Chart.js. Cierpliwość na wydanie wersji 2.0.