7

編集トニーとの以下の会話の後、より理解しやすいように質問を書き直しました（ありがとう！）。

目標同じチャートに複数の折れ線グラフ (2 つとしましょう) をレンダリングします。グラフには異なる x/y 値のペアがあります。1 つの x 値に対して、両方の y 値がわかりません。

シルバーライトを使用しています。これに利用できるクラスはSerialChartとLineGraphです。両方のグラフのデータ ソースは同じで、SerialChartレベルで設定されています。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 の値を設定すると、水平接続が存在しないはずの場所に水平接続が作成されます。私は基本的に間違った結果につながるグラフを変更しています。

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

4

1 に答える 1

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

これをすべて Fiddle に入れました - http://jsfiddle.net/64EWx/

于 2012-10-10T10:09:18.683 に答える