2011-07-15 17 views
3

MS ASP.NETチャートコントロールについて質問があります。MS Chartコントロール:グラフ領域の線の描画とラベリング

  1. グラフのy軸に沿って線シリーズをバーシリーズに設定するにはどうすればよいですか?
  2. 凡例にこのシリーズを追加する代わりに、系列の名前、つまり「目標」をグラフの右側に配置できますか?

下のスクリーンショットからわかるように、グラフのy軸には伸びていない棒グラフの上に線の系列が表示されています。助けのための

var data1 = new Dictionary<string, float> 
{ 
    { "W1", 80}, 
    { "W2", 60}, 
    { "W3", 40}, 
    { "W4", 20}, 
    { "W5", 10} 
}; 
var data2 = new Dictionary<string, float> 
{ 
    { "W1", 10}, 
    { "W2", 10}, 
    { "W3", 0}, 
    { "W4", 10}, 
    { "W5", 10} 
}; 
var data3 = new Dictionary<string, float> 
{ 
    { "W1", 10}, 
    { "W2", 30}, 
    { "W3", 50}, 
    { "W4", 70}, 
    { "W5", 80} 
}; 
var data4 = new Dictionary<string, float> 
{ 
    { "W1", 50}, 
    { "W2", 50}, 
    { "W3", 50}, 
    { "W4", 50}, 
    { "W5", 50} 
}; 

var chart = new Chart(); 
chart.Height = Unit.Pixel(300); 
chart.Width = Unit.Pixel(450); 
chart.Legends.Add("Legend").Alignment = StringAlignment.Center; 
chart.Palette = ChartColorPalette.None; 
chart.PaletteCustomColors = new Color[] { Color.FromArgb(191, 214, 151), Color.FromArgb(249, 255, 149), Color.FromArgb(191, 79, 75), Color.Green }; 

var area = new ChartArea(); 
area.AxisX.MajorGrid.LineColor = Color.Transparent; 
chart.ChartAreas.Add(area); 

var series1 = new Series("Done"); 
foreach (var item in data1) 
{ 
    series1.Points.AddXY(item.Key, item.Value); 
} 
series1.MarkerBorderWidth = 1; 

var series2 = new Series("In Progress"); 
foreach (var item in data2) 
{ 
    series2.Points.AddXY(item.Key, item.Value); 
} 

var series3 = new Series("Needs Review"); 
foreach (var item in data3) 
{ 
    series3.Points.AddXY(item.Key, item.Value); 
} 

var series4 = new Series("Goal"); 
foreach (var item in data4) 
{ 
    series4.Points.AddXY(item.Key, item.Value); 
} 
series4.ChartType = SeriesChartType.Line; 
series4.BorderWidth = 2; 

series1.ChartType = series2.ChartType = series3.ChartType = SeriesChartType.StackedColumn; 
series1.Font = series2.Font = series3.Font = series4.Font = new Font("Verdana", 8.25f, FontStyle.Regular); 

chart.Series.Add(series1); 
chart.Series.Add(series2); 
chart.Series.Add(series3); 
chart.Series.Add(series4); 

感謝を次のように

enter image description here

コードがあります。


UPDATE:特定の色を設定

  • :私は適切な解決策を探し続けたよう
    、私はの意図を単に「ゴール」ラインシリーズの追加チャートを実装既存のチャート
012の上にこのチャート敷設透明
  • にこの新しいグラフのプロパティ

    このアプローチでは、「ゴール」ラインシリーズをバーシリーズに表示し、「ゴール」ラインシリーズをy軸に延長することで、適切なプレゼンテーションを提供しました。しかし、それはツールチップと既存のチャート上の棒グラフのクリックアクションを無効にしました。この不十分なユーザーエクスペリエンスのために、このアプローチは適切な解決策ではありません。

    解の探索が続く...

  • 答えて

    0

    は、質問1の場合:

    もう一つの方法は、どこでも、チャート上で、あなたが望むものを描くことができPostPaintイベントを、使用することです...しかし、それでもツールチップやそのような対話的な機能をその行で失うことになります。あなたの質問2については

    :あなたは伝説のアイテムコレクションからの不要な凡例項目を除外することができ

    。あなたが唯一のラベルなど、一点、またはで二次Y軸を持つことができ、

    yourChart.CustomizeLegend += new EventHandler<CustomizeLegendEventArgs> (CustomizeLegendEventHandler); 
    //... 
    static void CustomizeLegendEventHandler(object sender, CustomizeLegendEventArgs e) 
    { 
        int anotherIndex = 3; 
        if (sender != null && sender is Chart) 
        { 
        if (e != null && e.LegendItems != null && e.LegendItems.Count > 0) 
        { 
         Chart ch = ((Chart)sender); 
         if (...) //your logic here 
         { 
         //example: you can move a legend item from one index to another here: 
         LegendItem item = e.LegendItems[0]; 
         e.LegendItems.RemoveAt(0); 
         e.LegendItems.Insert(anotherIndex, item); 
         } 
        } 
        } 
    } 
    

    そして:あなたはそれがこの例を実行されるように凡例をカスタマイズすることができ、あなたは何もあなたを描画するPostPaintイベントハンドラを使用することができます願い。

    偉大なインストール可能なサンプルパックは、MS:hereからダウンロードできます。彼らはあなたが勉強することができる多くのコード例を示しています。私はそれらのサンプルからこれらのものを見つけ出し、この新しいフリーリフレクターを使用しました:ILSpy

    これが役に立ちます。

    +0

    質問2のあなたのソリューションは、PostPaintイベントハンドラを使用して、チャートのツールチップやインタラクティブな機能を失いたいものを描画しますか?セカンダリY軸を持つことでこの望ましくないユーザーエクスペリエンスが発生しないと想定するのは公正でしょうか?助けてくれてありがとう。 – phreeskier

    +0

    @phreeskier:凡例にそのlabel.entryが必要ないため、この方法でペイントしたり、2番目の軸で空のデータポイントを使用したりしました。 1つの空のポイントを持つシリーズを使用する場合は、インタラクティブ性があります(ペイントするとインタラクティブ性はありません)。 2番目のY軸のためにユーザーエクスペリエンスに悪影響がないと想定することは安全だと思います。 – woohoo

    関連する問題