Nvd3.js - संचयी चार्ट

Question

पर एकाधिक वाई-अक्ष जोड़ना मुझे अपने संचयी एनवीडी 3 चार्ट में एकाधिक वाई-अक्ष जोड़ने की ज़रूरत है, क्या किसी को पता है कि लाइब्रेरी के कोड का मुझे किस भाग को संशोधित करने की आवश्यकता होगी?

यदि आप इसे स्वयं कर चुके हैं और एक जेएसफ़िल्ड प्रदान कर सकते हैं तो भी बेहतर होगा।

किसी भी सुझाव की सराहना की जाएगी।

Answer 1

यदि आप एकल चार्ट में एकाधिक वाई अक्ष जोड़ने का जिक्र कर रहे हैं जो पहले से ही NVD3 line and bar chart में उपलब्ध है। आंशिक कोड स्निपेट नीचे दिखाया गया है।

 chart.y1Axis 
      .tickFormat(d3.format(',f')); 

     chart.y2Axis 
      .tickFormat(function(d) { return '$' + d3.format(',f')(d) }); 

Answer 2

केवल विशिष्ट चार्ट प्रकार हैं जिनमें बहु वाई-अक्ष कार्यक्षमता है।

यह संचयी रेखा चार्ट के लिए उपलब्ध नहीं है।

हालांकि यह मल्टी-चार्ट के लिए उपलब्ध है। Angluar NVD3 होम पेज here पर एक उदाहरण है लेकिन यह बार और रेखाओं के साथ उदाहरण दिखाता है।

मैंने होम पेज से प्लंकर उदाहरण को फोर्क किया और सीरीज़ प्रकारों को सभी लाइनों में बदल दिया ताकि आप यह दिखा सकें कि संचयी रेखा चार्ट के समान परिणाम प्राप्त करने के लिए आप बहु का उपयोग कैसे कर सकते हैं।

$scope.options = { 
      chart: { 
       type: 'multiChart', 
       height: 450, 
       margin : { 
        top: 30, 
        right: 60, 
        bottom: 50, 
        left: 70 
       }, 
       color: d3.scale.category10().range(), 
       //useInteractiveGuideline: true, 
       transitionDuration: 500, 
       xAxis: { 
        tickFormat: function(d){ 
         return d3.format(',f')(d); 
        } 
       }, 
       yAxis1: { 
        tickFormat: function(d){ 
         return d3.format(',.1f')(d); 
        } 
       }, 
       yAxis2: { 
        tickFormat: function(d){ 
         return d3.format(',.1f')(d); 
        } 
       } 
      } 
     }; 

अपने डेटा को परिभाषित करें::

Pluker Example

पहली बात कई अक्ष के लिए विकल्प जोड़ने के लिए है (मैं भी डेटा उदाहरण को आसान बनाने के लिए सेट बदल)

$scope.data = [{key: 'series1', type: "line", yAxis: 1, values:[{x: 10, y: 20}, {x: 20, y: 35}, {x: 30, y:18}]}, 
     {key: 'series2', type: "line", yAxis: 1,values:[{x: 10, y: 12}, {x: 20, y: 26}, {x: 30, y: 15}]}, 
     {key: 'series3', type: "line", yAxis: 2,values:[{x: 10, y: 0.75}, {x: 20, y: 0.9}, {x: 30, y: 0.8}]}, 
     {key: 'series4', type: "line", yAxis: 2,values:[{x: 10, y: 0.2}, {x: 20, y: 0.3}, {x: 30, y: 0.4}]}] 

पर ध्यान दें प्रत्येक श्रृंखला के खिलाफ 10 और yAxis कुंजी सेट की गई हैं।

सामान्य तौर पर अपने <div> सेट करें:

<nvd3 options="options" data="data"></nvd3> 

और बस हो गया!

आपको एक ही चार्ट मिलेगा जैसा आप संचयी रेखा चार्ट के साथ करेंगे लेकिन एकाधिक धुरी सेट करने की क्षमता होगी।