dimplejs의 다중 시리즈

Question

나는 다중 축 차트와 함께 dimplejs에 관심을 가졌으며 다중 축 로직에 조금 붙어 있습니다. 다음 데이터와

:

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 시리즈를 표시 할 수 있습니다. 그러나 Profit 시리즈는 실제로 Revenue와 동일한 축에 있지 않으며, 모든 것이 적절한 솔루션보다 해킹처럼 보입니다.

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

편집 : 이제 composite axes를 사용할 수있는 버전 2 때문에 더 이상 필요

.

는

ORIGINAL :

내가 여기에 문제를 볼

, 문제가 다중 축하지, 그것은 보조개가 정말 아직 지원하지 않는 단일 축에 대한 여러 조치를 그리려고 함께.

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

이 제한 약간은 현재 그러나 나는 단지 내가 할 수있는 정말 좋은 구현을위한 아이디어를 했어 : 내가 지금 할 수있는 최선은 데이터 해킹의 비트입니다 두려워 이와 같은 복합 축에 대한 적절한 지원을 추가하십시오. 바라기를 그렇게 먼 미래에는 가능할 것입니다.

행운

존