Çok amaçlı dizi, dimplejs

Question

Çok amaçlı bir grafikte dimplejs'le çalışıyorum ve çok eksenli mantıkla biraz takılı kaldım. Aşağıdaki veriler sayesinde

:

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} 
] 

Ben aylara göre, bir grafik gösteren elde etmeye çalışmak, benim gelir ve aynı y ekseni üzerinde benim karı ve ikincil bir y ekseni üzerinde benim birimleri.

Aşağıdaki kod ile 3 diziyi görüntüleyebilirim. Ancak Kâr serisi gerçekten Gelir ile aynı eksende değildir ve her şey uygun bir çözümden daha çok bir hack gibi görünmektedir.

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]); 

Mantığımın doğru şekilde diziyle nasıl oynanacağının yanlış olabileceğini düşünüyorum. Herhangi bir yardım harika olurdu.

Çok teşekkürler, Xavier

Tam kodu:

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

DÜZENLEME: Artık composite axes kullanabilirsiniz sürüm 2 beri bu artık gerek olmadığını

.

ORİJİNAL:

Burada sorun olduğunu fark

, sorunu birden eksenli değil, Gamze gerçekten henüz desteklemediği tek bir eksen karşı birden önlemleri çekmeye çalışıyor beraberdir.

<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> 

Bu bir sınırlama biraz şu anda ama sadece Yapabileceğim gerçekten iyi uygulanması için bir fikir geldi: Ben şimdi için yapabileceğiniz en iyi bir veri kesmek biraz korkuyorum Bunun gibi kompozit eksenler için uygun destek eklemek. Umarım bu çok uzak olmayan bir gelecekte mümkün olacaktır.

İyi şanslar

John