dimplejs में बहु-श्रृंखला

Question

मैं dimplejs में एक बहु-श्रृंखला चार्ट के साथ tinkering और बहु ​​अक्ष तर्क के साथ थोड़ा अटक गया है।

निम्न डेटा के साथ

:

var data = [ 
    {"Month":"01/2013", "Revenue":2000, "Profit":2000, "Units":4}, 
    {"Month":"02/2013", "Revenue":3201, "Profit":2000, "Units":3}, 
    {"Month":"03/2013", "Revenue":1940, "Profit":14000, "Units":5}, 
    {"Month":"04/2013", "Revenue":2500, "Profit":3200, "Units":1}, 
    {"Month":"05/2013", "Revenue":800, "Profit":1200, "Units":4} 
] 

मैं एक चार्ट प्रदर्शित करने के लिए, महीने के लिए प्रयास करते हैं, मेरी राजस्व और मेरे लाभ ही y अक्ष पर और एक माध्यमिक y अक्ष पर मेरी इकाइयों।

नीचे दिए गए कोड के साथ, मैं 3 श्रृंखला प्रदर्शित करने में कामयाब रहा। लेकिन लाभ श्रृंखला वास्तव में एक ही अक्ष पर राजस्व के रूप में नहीं है, और पूरी बात एक उचित समाधान की तुलना में हैक की तरह दिखती है।

var chart = new dimple.chart(svg, data); 

chart.setBounds(60,20,680,330); 

var x = chart.addCategoryAxis("x", "Month"); 
var y1 = chart.addMeasureAxis("y", "Revenue"); 
chart.addSeries("null", dimple.plot.line, [x,y1]); 
var y2 = chart.addMeasureAxis("y", "Units"); 
chart.addSeries("null", dimple.plot.bar, [x,y2]); 
var y3 = chart.addMeasureAxis("y", "Profit"); 
chart.addSeries("null", dimple.plot.line, [x,y3]); 

मुझे लगता है कि मेरा तर्क गलत तरीके से श्रृंखला के साथ कैसे खेलना गलत हो सकता है। कोई भी मदद बहुत अच्छी रहेगी।

धन्यवाद एक बहुत, जेवियर

पूर्ण कोड:

var svg = dimple.newSvg("body", 800, 400); 

var data = [ 
    {"Month":"01/2013", "Revenue":2000, "Profit":2000, "Units":4}, 
    {"Month":"02/2013", "Revenue":3201, "Profit":2000, "Units":3}, 
    {"Month":"03/2013", "Revenue":1940, "Profit":14000, "Units":5}, 
    {"Month":"04/2013", "Revenue":2500, "Profit":3200, "Units":1}, 
    {"Month":"05/2013", "Revenue":800, "Profit":1200, "Units":4} 
] 

var chart = new dimple.chart(svg, data); 

chart.setBounds(60,20,680,330); 

var x = chart.addCategoryAxis("x", "Month"); 
var y1 = chart.addMeasureAxis("y", "Revenue"); 
chart.addSeries("null", dimple.plot.line, [x,y1]); 
var y2 = chart.addMeasureAxis("y", "Units"); 
chart.addSeries("null", dimple.plot.bar, [x,y2]); 
var y3 = chart.addMeasureAxis("y", "Profit"); 
chart.addSeries("null", dimple.plot.line, [x,y3]); 

x.dateParseFormat = "%m/%Y"; 
x.addOrderRule("Date"); 

chart.draw(); 

Answer 1

संपादित करें:

यह नहीं रह गया है की आवश्यकता होती है संस्करण 2 के बाद से अब आप composite axes उपयोग कर सकते हैं।

मूल:

मैं यहाँ समस्या देखते हैं, इस मुद्दे को कई कुल्हाड़ियों के साथ नहीं है, यह एक धुरी जो डिंपल वास्तव में अभी तक का समर्थन नहीं करता के खिलाफ कई उपायों आकर्षित करने के लिए कोशिश कर रहा है के साथ है।

<div id="chartContainer"> 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
    <script src="/dist/dimple.v1.min.js"></script> 
    <script type="text/javascript"> 
     var svg = dimple.newSvg("#chartContainer", 800, 400); 

     // Data hack required to get revenue and profit on the same axis, units are 
     // arbitrarily allocated to revenue but the values will be summed by date 
     var data = [ 
      {"Month":"01/2013", "Metric":"Revenue", "Revenue/Profit":2000, "Units":4}, 
      {"Month":"02/2013", "Metric":"Revenue", "Revenue/Profit":3201, "Units":3}, 
      {"Month":"03/2013", "Metric":"Revenue", "Revenue/Profit":1940, "Units":5}, 
      {"Month":"04/2013", "Metric":"Revenue", "Revenue/Profit":2500, "Units":1}, 
      {"Month":"05/2013", "Metric":"Revenue", "Revenue/Profit":800, "Units":4}, 
      {"Month":"01/2013", "Metric":"Profit", "Revenue/Profit":2000, "Units":0}, 
      {"Month":"02/2013", "Metric":"Profit", "Revenue/Profit":2000, "Units":0}, 
      {"Month":"03/2013", "Metric":"Profit", "Revenue/Profit":14000, "Units":0}, 
      {"Month":"04/2013", "Metric":"Profit", "Revenue/Profit":3200, "Units":0}, 
      {"Month":"05/2013", "Metric":"Profit", "Revenue/Profit":1200, "Units":0} 
     ]; 

     var chart = new dimple.chart(svg, data); 
     chart.setBounds(60,20,680,330); 

     // Add your x axis - nothing unusual here 
     var x = chart.addCategoryAxis("x", "Month"); 
     // First y axis is the combination axis for revenue and profit 
     var y1 = chart.addMeasureAxis("y", "Revenue/Profit"); 
     // Second is the units only 
     var y2 = chart.addMeasureAxis("y", "Units"); 

     // Plot the bars first - the order of series determines their dom position 
     // from back to front, this means bars are at the back. It's important 
     // to note that the string here "Unit Sales" is NOT in the data. Any string 
     // not in the data is just used to apply a label which can be used for colouring 
     // as it is here and will also appear in tool tips 
     var bars = chart.addSeries("Unit Sales", dimple.plot.bar, [x,y2]); 
     // Use a simple line by metric for the other measures 
     var lines = chart.addSeries("Metric", dimple.plot.line, [x,y1]); 

     // Do a bit of styling to make it look nicer 
     lines.lineMarkers = true; 
     bars.barGap = 0.5; 
     // Colour the bars manually so they don't overwhelm the lines 
     chart.assignColor("Unit Sales", "black", "black", 0.15); 

     x.dateParseFormat = "%m/%Y"; 
     x.addOrderRule("Date"); 


     // Here's how you add a legend for just one series. Excluding the last parameter 
     // will include every series or an array of series can be passed to select more than 
     // one 
     chart.addLegend(60, 5, 680, 10, "right", lines); 

     chart.draw(); 

     // Once Draw is called, this just changes the number format in the tooltips which for these particular 
     // numbers is a little too heavily rounded. I assume your real data isn't like this 
     // so you probably won't want this line, but it's a useful tip anyway! 
     y1.tickFormat = ",d"; 

    </script> 
</div> 

यह वर्तमान में एक सीमा का एक सा है, लेकिन मैं सिर्फ एक बहुत अच्छी कार्यान्वयन मैं क्या कर सकते हैं के लिए एक विचार किया है: मुझे डर है कि सबसे अच्छा मैं अब के लिए क्या कर सकते हैं एक डेटा हैक का एक सा है कर रहा हूँ इस तरह समग्र अक्षों के लिए उचित समर्थन जोड़ने के लिए। उम्मीद है कि बहुत दूर भविष्य में संभव नहीं होगा।

गुड लक

जॉन