c3js> Wert 0 zwischen Y und Y2 ausgerichtet

Question

Wie wird der Wert der Y 0 Achse auf den Wert der Y 2 0 Achse ausgerichtet?

Siehe jsFiddle zu verstehen.

habe ich versucht, die Option center:0 auf der Axt, aber ich will nicht 0 in der Mitte des Graphen ..

var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['data1', 2000, 350, 300, -200, -50, 0], 
      ['data2', 130, 100, 140, 200, 150, 50] 
     ], 
     types: { 
      data1: 'line', 
      data2: 'bar' 
     }, 
     axes:{ 
      data1:'y', 
      data2:'y2' 
     } 
    }, 
    axis: { 
     y: { 
      padding: {bottom: 0} 

     }, 
     y2: { 
       show:true, 
      padding: {bottom: 0} 

     }, 
     x: { 

      min: 0, 
      show: true 
     } 
    }, 
    grid: { 
     x: { 
      show: false 
     }, 
     y: { 
      show: false, 
      lines: [ 
       {value: 0.0, text: 'i want 0 here ->', class:'red'} 
      ] 
     } 
    } 
}); 

Official documentation.

Danke.

Answer 1

Im Allgemeinen möchten Sie den gleichen Anteil der Achsen oben reicht und unter Null, weshalb min: -20 würde für dieses Beispiel arbeiten

Dies würde im Allgemeinen arbeiten, nachdem Sie Ihr Diagramm erzeugt haben:

var d1 = d3.extent(chart.data.values("data1")); 
var d2 = d3.extent(chart.data.values("data2")); 
if (d2[0] < 0 || d1[0] < 0) { 
     var prop1 = d1[0] < 0 ? -(d1[1]/d1[0]) : Math.Infinity; 
    var prop2 = d2[0] < 0 ? -(d2[1]/d2[0]) : Math.Infinity; 
    if (prop1 > prop2) { 
     d1[0] = -(d1[1]/prop2); 
    } else { 
      d2[0] = -(d2[1]/prop1); 
    } 
    chart.axis.range({ 
      min: {y: d1[0], y2: d2[0]}, 
      max: {y: d1[1], y2: d2[1]} 
    }); 
} 

Grundsätzlich, wenn entweder (oder beiden) -Reihe einen negativen Wert hat, dann skaliert sie beide Reihen den gleichen Anteil von positiven zu negativen Bereich zu haben, die min/max-Achse Einstellungen. Dies bedeutet Null auf dem gleichen vertikalen Punkt sitzt für beide

https://jsfiddle.net/ynz6quum/4/