Amcharts SerialChart wiele linii wykresu ścieżek różnych kategorii wartości (Silverlight)

Question

EDYTOWANIE Przepisałem moje pytanie, aby było bardziej zrozumiałe po rozmowie poniżej z Tonym (dzięki!).

GOAL Renderuj wiele wykresów liniowych (powiedzmy 2) na tym samym wykresie. Wykresy mają różne pary wartości x/y. Dla jednej wartości x nie znam obu wartości y.

Używam Silverlight. Klasy dostępne dla tego są i LineGraph. Źródło danych dla obu wykresów jest takie samo i jest ustawione na poziomie . Nazwa własności dla osi X jest tam również zdefiniowana dla obu wykresów (CategoryValueMemberPath).

Zgodnie z sugestią zawartą w dokumentacji amCharts, musimy utworzyć obiekty, które mają właściwość dla osi kategorii (oś x), a następnie jedną właściwość na wykres. Nazwijmy je "Graph1" i "Graph2". Więc źródło danych wygląda mniej więcej tak:

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 Co mam zrobić z „???” wartości? Nie mam rzeczywistej wartości tego wykresu dla tej wartości kategorii.

Jeśli nie ustawię wartości, przyjmuje się domyślną wartość 0,0 i rysuje ona skok na osi X. Jeśli ustawię poprzednio znaną wartość Graph1/Graph2, wówczas powstanie połączenie poziome, w którym nie powinno być żadnego z nich. Zasadniczo zmieniam wykres, który prowadzi do złego wyniku.

Jak rozwiązać ten problem? Mam wrażenie, że amCharts nie obsługują tego scenariusza.

Answer 1

Musisz dodać dwie osie "wartości", jedną w kierunku X i jedną w kierunku Y (wyobraź sobie, jak wykres bąbelkowy).

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

scalić wszystkie twoje punkty danych do jednej tablicy ze wspólnym X nazwy pola oś („x” w moim przykładzie), a dla punktów na linii 1, dodać właściwość „line1” z jego wartości, a dla wskazuje na linię 2, dodaj właściwość "line2".

Na przykład, dane będzie wyglądać następująco:

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

Następnie dodać „Graf” dla każdej linii na wykresie określającym, gdzie można uzyskać wartości z tablicy w obiekcie.

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

Wrzuciłem to wszystko pod ryba dla ciebie - http://jsfiddle.net/64EWx/