ZedGraphのライブラリを使ったグラフを書いてみると上のように表示された。
ページにZedGraphWebパーツを配置し、RenderGraphイベントに以下のようなメソッドを登録し、
protected void ZedGraphWeb_RenderGraph(ZedGraph.Web.ZedGraphWeb webObject, System.Drawing.Graphics g, ZedGraph.MasterPane pane)
{
if (GridView3.DataSource == null)
{
return;
}
ProjectDataSet.ProjectRemainWorkTimeDataTable prwtdt = (ProjectDataSet.ProjectRemainWorkTimeDataTable)GridView3.DataSource;
List<DateTime> listdt = new List<DateTime>();
List<double> listreminedWork= new List<double>();
for (int i = 0; i < prwtdt.Count; i++)
{
listdt.Add(prwtdt[i].ReportDate);
listreminedWork.Add(prwtdt[i].RemainTime);
}
BurnDownChart.CreateChart(pane[0], listdt.ToArray(), listreminedWork.ToArray());
}
BurnDownChartクラスはこんな感じにしてみました。
using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using ZedGraph;
using ZedGraph.Web;
/// <summary>
/// BurnDownChart の概要の説明です
/// </summary>
public class BurnDownChart
{
public BurnDownChart()
{
//
// TODO: コンストラクタ ロジックをここに追加します
//
}
static public void CreateChart(GraphPane gp,DateTime[] dt,double[] remainwork)
{
// Set the titles and axis labels
gp.Title.Text = "バーンダウンチャート";
gp.XAxis.Title.Text = "日付";
gp.YAxis.Title.Text = "残日数";
// Make up some data points based on the Sine function
string[] datename = new string[dt.Length];
for (int i = 0; i < dt.Length; i++)
{
datename[i] = dt[i].ToShortDateString();
}
LineItem myCurve = gp.AddCurve("残日数",
null,remainwork, System.Drawing.Color.Red, SymbolType.Diamond);
myCurve.Line.IsSmooth = false;
// Set the XAxis to date type
gp.XAxis.Type = AxisType.Text;
gp.XAxis.Scale.TextLabels = datename;
gp.XAxis.Scale.FontSpec.Angle = 40;
gp.AxisChange();
}
}
X軸をXDate型(ZedGraph独自のdouble型変数に格納する日付)のグラフのサンプルは以下。
http://zedgraph.org/wiki/index.php?title=Tutorial:Date_Axis_Chart_Demo
ただ、これで表示すると、5月28日が、28-5みたいに分けわからない形式になるため、この方法を採用せず。
X軸はText型のものにしました。参考にしたサンプルは以下。
http://zedgraph.org/wiki/index.php?title=Tutorial:Text_Axis_Chart_Demo
