चार्ट.जेएस में बार और लाइन चार्ट के लिए दूसरा वाई-अक्ष कैसे जोड़ें?

Question

मैं दो डेटासेट तुलनाओं के लिए चार्ट.जेएस में एक डबल वाई-अक्ष जोड़ने की कोशिश कर रहा हूं। मैं वर्तमान में लेघ क्विंस के लाइनबायर एक्सटेंशन का उपयोग कर रहा हूं जो उत्तर मिला: Chart.js how to get Combined Bar and line charts?

एक साल पहले डबल वाई-अक्ष के लिए एक समाधान भी लिखा गया था, लेकिन केवल लाइन चार्ट के लिए, और इसके साथ सिंक से बाहर निकलने का तरीका निक के मास्टर। ऐसा लगता है कि लाइन या बार चार्ट, या डबल-वाई है लेकिन दोनों नहीं।

मेरा मुद्दा यह है कि मुझे टीएसएटी% (संतृप्ति स्तर), बाएं वाई-अक्ष, लाइन चार्ट, फेरिटिन खुराक के स्तर, सही वाई-अक्ष बार चार्ट की मात्रा में प्रतिनिधित्व करने की आवश्यकता है। यहाँ है कि मैं क्या इसकी जरूरत तरह देखने के लिए है:

(लगता है Stackoverflow मुझ पर यह रंग बदल गया है, तो आप अभी भी पढ़ सकते हैं Y- अक्ष पैमाने आशा)

किसी को कंप्यूटर अनुप्रयोग कर सकते हैं एक समाधान के साथ मैं बहुत सराहना करता हूं।

वर्तमान कोड:

  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 ... मैं संशोधित Quince के LineBar पहले बार प्रस्तुत करना तो लाइनों। कोड मूल रूप से इसे उलट दिया था। इस प्रकार, मैं jsfiddle में कुछ जोड़ने में सक्षम नहीं हो सकता, अगर मैं वहां एक उदाहरण जोड़ने में सफल हूं तो मैं एक लिंक संपादित और जोड़ दूंगा।

धन्यवाद!

Answer 1

दो Y अक्ष के साथ एक लाइन चार्ट दिखाने के लिए, @khertan इस सुविधा को जोड़ने के लिए >>https://github.com/nnnick/Chart.js/pull/1355

आप संशोधित Chart.js फ़ाइल को यहां >>https://github.com/khertan/Chart.js/tree/9edcc71f97361bb45c8fe93d07acb1917c2b4807

आप प्राप्त कर सकते हैं एक पुल का अनुरोध किया केवल अपने options चर करने के लिए विकल्प जोड़ने के लिए की आवश्यकता होगी:

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

और फिर दृष्टांत एक सामान्य रेखा चार्ट:

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

समस्या यह है कि यदि आप स्टैक्डबार जैसे एक्सटेंशन का उपयोग कर रहे हैं, उदाहरण के लिए, यह शायद तोड़ देगा ... यही कारण है कि इसे चार्ट.जेएस की मास्टर की शाखा के साथ विलय नहीं किया गया है। 2.0 संस्करण रिलीज के लिए धैर्य।