AmCharts SerialChart mehrere Liniendiagramme verschiedene Kategorie Wert Member-Pfade (Silverlight)

Question

EDIT Ich schrieb meine Frage um es verständlicher nach dem Gespräch unten mit Tony (danke!).

GOAL Rendern Sie mehrere Liniendiagramme (sagen wir 2) in demselben Diagramm. Die Diagramme haben unterschiedliche x/y-Wertepaare. Für einen x-Wert kenne ich beide y-Werte nicht.

Ich verwende Silverlight. Die dafür verfügbaren Klassen sind und LineGraph. Die Datenquelle für beide Diagramme ist identisch und wird auf der Ebene festgelegt. Der Name der Eigenschaft für die X-Achse wird dort auch für beide Graphen definiert (CategoryValueMemberPath).

Wie von der amCharts-Dokumentation vorgeschlagen, müssen wir Objekte erstellen, die eine Eigenschaft für die Kategorieachse (x-Achse) und dann eine Eigenschaft pro Diagramm haben. Nennen wir sie "Graph1" und "Graph2". So ist die Datenquelle sieht ungefähr so ​​aus:

List<MyClass> data = new List<MyClass>() 
{ 
    new MyClass() { Category = 0.1, Graph1 = 0.14, Graph2 = ??? } 
    ,new MyClass() { Category = 0.15, Graph1 = ???, Graph2 = 0.05 } 
    ,new MyClass() { Category = 0.2, Graph1 = 0.35, Graph2 = ??? } 
    ,new MyClass() { Category = 0.18, Graph1 = ???, Graph2 = 0.12 } 
    ... and so on ... 
} 

PROBLEM Was soll ich über die „???“ tun Werte? Ich habe nicht den tatsächlichen Wert für dieses Diagramm für diesen Kategoriewert.

Wenn ich keinen Wert einstelle, wird der Standardwert 0,0 angenommen und es wird eine Spitze auf die x-Achse gezogen. Wenn ich den zuvor bekannten Graph1/Graph2-Wert einstelle, erzeugt er eine horizontale Verbindung, wo es keine geben soll. Ich verändere grundsätzlich die Grafik, die zu einem falschen Ergebnis führt.

Also, wie löse ich das? Ich habe das Gefühl, dass amCharts dieses Szenario nicht unterstützt.

Answer 1

Sie müssen zwei 'Wert'-Achsen hinzufügen, eine in X-Richtung und eine in Y-Richtung (stellen Sie sich vor, wie bei einem Blasendiagramm).

// AXES 
// X 
var xAxis = new AmCharts.ValueAxis(); 
xAxis.position = "bottom"; 
xAxis.gridAlpha = 0.1; 
xAxis.autoGridCount = true; 
chart.addValueAxis(xAxis); 

// Y 
var yAxis = new AmCharts.ValueAxis(); 
yAxis.position = "left"; 
yAxis.gridAlpha = 0.1; 
yAxis.autoGridCount = true; 
chart.addValueAxis(yAxis); 

Merge alle Datenpunkte in einer Anordnung mit einer gemeinsamen X-Achsen-Feldnamen (‚x‘ in meinem Beispiel) und für die Punkte auf der Linie 1, die eine Eigenschaft von ‚LINE1‘ mit seinen Wert hinzufügen, und für Punkte in Zeile 2, fügen Sie eine Eigenschaft von 'line2' hinzu.

Zum Beispiel Ihrer Daten würden wie folgt aussehen:

var chartData = [ 
    {x:0.1,line1:0.25}, 
    {x:0.246,line1:0.342}, 

    {x:0.12,line2:0.16}, 
    {x:0.3,line2:0.485} 
]; 

dann einen ‚Graph‘ hinzuzufügen für jede Zeile zu Ihrem Diagramm angibt, wo den Wert erhalten von im Objektarray.

// GRAPHS 
var graph = new AmCharts.AmGraph(); 
graph.xField = "x"; 
graph.yField = "line1"; 
graph.lineAlpha = 1; 
graph.lineColor = '#FF9E01'; 
chart.addGraph(graph); 

var graph2 = new AmCharts.AmGraph(); 
graph2.xField = "x"; 
graph2.yField = "line2"; 
graph.lineAlpha = 1; 
graph2.lineColor = '#9EFF01'; 
chart.addGraph(graph2); 

Ich habe all dies für Sie in eine Fiddle setzen - http://jsfiddle.net/64EWx/