2012-10-09 18 views
7

EDIT Ho riscritto la mia domanda per renderla più comprensibile dopo la conversazione in basso con Tony (grazie!).Grafici a righe multiple di Amcharts Grafici a più righe di membri di categoria diversa (Silverlight)

GOAL Rendering di più grafici a linee (diciamo 2) nello stesso grafico. I grafici hanno coppie di valori x/y diverse. Per un valore x, non conosco entrambi i valori y.

Sto usando Silverlight. Le classi disponibili per questo sono e LineGraph. L'origine dati per entrambi i grafici è la stessa ed è impostata al livello . Il nome della proprietà per l'asse x viene anche definito lì per entrambi i grafici (CategoryValueMemberPath).

Come suggerito dalla documentazione di amCharts, è necessario creare oggetti che abbiano una proprietà per l'asse delle categorie (asse x) e quindi una proprietà per grafico. Chiamiamoli "Graph1" e "Graph2". Così l'origine dei dati simile a questa:

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

PROBLEMA Cosa dovrei fare per il "???" valori? Non ho il valore effettivo per quel grafico per quel valore di categoria.

Se non si imposta un valore, si assume il valore predefinito di 0.0 e si disegna un picco sull'asse x. Se imposto il valore Graph1/Graph2 precedentemente noto, crea una connessione orizzontale in cui non dovrebbe esserlo. In pratica sto alterando il grafico che porta a un risultato errato.

Quindi come posso risolvere questo? Ho la sensazione che gli amCharts non supportino questo scenario.

risposta

4

È necessario aggiungere due assi "valore", uno nella direzione X e uno nella direzione Y (immagina, come un grafico a bolle).

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

unire tutti i punti di dati in un unico array con un nome di campo asse comune X ('x' nel mio esempio) e per i punti sulla linea 1, aggiungere un alloggio di 'linea 1' con il suo valore, e per punta sulla riga 2, aggiungi una proprietà di 'linea2'.

Ad esempio, i dati sarebbero simile a questa:

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

quindi aggiungere un 'grafo' per ciascuna linea al grafico specificando dove ottenere il valore della matrice di oggetti.

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

ho messo tutto questo in un violino per voi - http://jsfiddle.net/64EWx/

+0

Ciao Tony, grazie per la tua risposta. Ma non sono ancora limitato dal valore del "gatto"? Ho diversi valori di "gatto" per le linee. Avrei le voci che hanno: {cat: 0.1, line1: 0.23, line2: , line3: } e {cat: 0.12, line1: , line2: 0.35, line3: }. Per quanto ne so, gli amCharts sono limitati da un valore di categoria comune. – Wolfgang

+0

Non è limitato. Ho usato i dati di esempio, che hanno valori di gatto diversi per ogni riga – tonycoupland

+0

Pensandoci, il nome "gatto" è probabilmente fuorviante. Lo cambierò – tonycoupland