2017-02-15 4 views
0

Die nvd3 linePlusBarChart ermöglicht yAxis mehr zu verwenden, die auch in ihrem Beispiel gezeigt wird here (und in dem Winkel nvd3 Beispiel here). In den Beispielen (siehe Plunker) verwenden sie einfach zwei Datenreihen und sie werden automatisch einer der yAxis zugeordnet. Für mich passiert das allerdings nicht.Wie zu zwingen Nutzung bestimmter yAchse in LinePlusBarChart von nvd3

Meine Daten sieht wie folgt aus:

[ 
    { 
    "key": "Series 1", 
    "bars": true, 
    "values": [ [1425942000, 20], [1425942040, 25], ... ] 
    }, 
    { 
    "key": "Series 2", 
    "bars": true, 
    "values": [ [1425942000, 80], [1425942040, 40], ... ] 
    }, 
    { 
    "key": "Series 3", 
    "bars": true, 
    "values": [ [1425942000, 37], [1425942040, 55], ... ] 
    }, 
    { 
    "key": "Series 4", 
    "values": [ [1425942000, 20132.44], [1425942040, 40032.93], ... ] 
    } 
] 

So aus den Daten sollte klar sein, dass es eine zweite yAxis werden muss, um für die vierte Reihe verwendet werden, wegen der großen Differenz im Maßstab.

Die Grafik-Konfiguration sieht wie folgt aus (beachten Sie, dass es sich um eine Konfiguration für Winkel nvd3 ist):

{ 
    type: 'linePlusBarChart', 
    height: 500, 
    margin : { 
     top: 50, 
     right: 75, 
     bottom: 50, 
     left: 50 
    }, 
    xAxis: { 
     axisLabel: 'Time', 
     tickFormat: function(d) { 
      return d3.time.format('%Y/%m/%d')(new Date(d)); 
     } 
    }, 
    x2Axis: { 
     tickFormat: function(d) { 
      return d3.time.format('%b %Y')(new Date(d)); 
     } 
    }, 
    y1Axis: { 
     axisLabel: 'Just some numbers here', 
     axisLabelDistance: -10, 
     tickFormat: function(d) { 
      return d3.format(',')(d); 
     } 
    }, 
    y2Axis: { 
     axisLabel: 'Some money numbers', 
     axisLabelDistance: 10, 
     width: 100, 
     tickFormat: function(d) { 
      return '$ ' + d3.format(',.2f')(d); 
     } 
    }, 
    y3Axis: {}, 
    y4Axis: {}, 
    bars: { 
     forceY: [0], 
     padData: true 
    }, 
    bars2: { 
     forceY: [0], 
     padData: true 
    } 
} 

Allerdings kann ich nicht scheinen, um herauszufinden, wie einige Datenreihen zu zwingen, sich zu befestigen zu einem bestimmten yAxis. Derzeit sind alle vier Serien an der rechten Achse angebracht.

Ich habe bereits versucht, ein yAxis: 1 (oder) -Attribut auf den Serienobjekten hinzuzufügen, so wie es für andere Diagrammtypen gemacht wird, aber es funktioniert nicht.

Also, wenn jemand einen Rat für mich hat, würde ich es wirklich zu schätzen wissen.

Bonus Frage: Gibt es eine Möglichkeit, das gleiche zu erreichen wie useInteractiveGuideline: true tut auf lineChart für die linePlusBarChart Ich will/muss verwenden?

Antwort

1

Ich habe den Fehler selbst gefunden. Die Serie sollte bar: true und nicht bars: true verwenden, dann werden beide yAxis verwendet.

[ 
    { 
    "key": "Series 1", 
    "bar": true, <-- instead of `"bars": true` 
    "values": [ [1425942000, 20], [1425942040, 25], ... ] 
    }, 
    ... 
]