2012-10-09 45 views
7

EDIT私はトニーとの会話の後に理解しやすくするために私の質問を書き直しました。Amcharts SerialChart複数の折れ線グラフ異なるカテゴリ値メンバパス(Silverlight)

ゴール複数の折れ線グラフを同じチャートでレンダリングします(2としましょう)。チャートは、異なるx/y値のペアを持ちます。 1つのx値に対して、私は両方のy値を知らない。

私はSilverlightを使用しています。利用できるクラスはとLineGraphです。両方のグラフのデータソースは同じで、レベルに設定されています。 X軸のプロパティの名前は、両方のグラフ(CategoryValueMemberPath)にも定義されています。

amChartsのドキュメントに示されているように、カテゴリ軸(x軸)のプロパティとグラフごとに1つのプロパティを持つオブジェクトを作成する必要があります。 "Graph1"と "Graph2"と呼んでみましょう。私は「???」について行うことになっています何

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

問題:だから、データソースは、次のようになります値?私はそのカテゴリ値のグラフの実際の値を持っていません。

値を設定しないと、デフォルト値の0.0が仮定され、x軸にスパイクが描画されます。私が以前に知られていたGraph1/Graph2値を設定すると、それは1ではないはずの水平接続を作成します。私は基本的に間違った結果につながるグラフを変更しています。

どうすればこの問題を解決できますか? amChartsがこのシナリオをサポートしていないと感じています。

答えて

4

X方向に1つ、Y方向に1つの2つの '値'軸を追加する必要があります(バブルチャートのように想像してください)。

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

(「x」は私の例で)共通のX軸フィールド名と1列にすべてのデータポイントをマージし、ライン1上の点のために、その価値の「LINE1」のプロパティを追加し、用2行目のポイントに 'line2'のプロパティを追加します。

たとえば、あなたのデータは次のようになります。

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

は、次にオブジェクト配列内から値を取得するために指定し、あなたのチャートに、各ラインのための「グラフ」を追加します。

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

私はあなたのためのフィドルにこのすべてを入れている - http://jsfiddle.net/64EWx/

+0

こんにちはトニー、ご回答いただきありがとうございます。しかし、私はまだ「猫」価値によって制限されていませんか?私はラインのために異なる 'cat'値を持っています。 {cat:0.1、line1:0.23、line2:、line3:}と{cat:0.12、line1:、line2:0.35、line3:}というエントリがあります。私の理解には、チャートは共通のカテゴリ値によって制限されています。 – Wolfgang

+0

これに限定されない。私はあなたのサンプルデータを使用しましたが、これは各行に異なる猫の値を持っています – tonycoupland

+0

それについて考えると、名前 'cat'はおそらく誤解を招きます。私はそれを変更します – tonycoupland

関連する問題