Chart绘图

我们直接拖放控件到页面,生成如下代码:

<asp:Chart ID="Chart2" runat="server">
  <Series>
    <asp:Series Name="Series1">
    </asp:Series>
  </Series>
  <ChartAreas>
    <asp:ChartArea Name="ChartArea1">
    </asp:ChartArea>
  </ChartAreas>
</asp:Chart>

现在,只要我们在后台为控件绑定数据源,就可以生成一个让人"比较满意"的图表了!
绑定数据代码如下:

OleDbConnection conn=ConnDB.CreatetoOleDbConn();
        OleDbCommand cmd=new OleDbCommand("select * from chart order by mMonth",conn);
        conn.Open();
        OleDbDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);

        //绑定到数据源Chart控件
        this.Chart1.DataBindCrossTable(dr, "mShopping", "mMonth", "mMoney", "Label=mMoney{C}");
        dr.Close();
        conn.Close();

这里需要留意的就是DataBindCrossTable函数了,其原型如下:

public void DataBindCrossTable(
  IEnumerable dataSource,    //需要绑定的数据源:可以是以下类型:
                //  OleDbDataReader, SqlDataReader或者DataView
                //---对应上面的OleDbDataReader
  string seriesGroupByField,  //分组数据的字段名:---对应店名:mShopping
  string xField,        //X轴数据的字段名:----对应销售日期:mMonth
  string yFields,        //Y轴数据的字段名:----对应当日的销售额:mMoney
  string otherFields      //其他的需要绑定的数据,
        //格式为: 点属性=Field[{Format}] [,PointProperty= Field[{Format}]]
        //例如:"Tooltip=Price{C1},Href=WebSiteName".
);

public void DataBindCrossTable(
  IEnumerable dataSource,
  string seriesGroupByField,
  string xField,
  string yFields,
  string otherFields,
  PointSortOrder sortingOrder  //指定了每组数据的顺序
);

生成的图表如下:


但是我们不知道这里的色块代表什么,因为没有图示,所以我们就需要自己动手了,在前台的代码里添加上:

<legends>
  <asp:legend LegendStyle="Row" IsTextAutoFit="False" Docking="Bottom" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold" Alignment="Center"></asp:legend>
</legends>

再运行一下看看,图示出来了,发现前面多了一个"Series1",好了,我们把前台代码里的Series1段删除掉看看:

<asp:Chart ID="Chart1" runat="server">
  <legends>
    <asp:legend LegendStyle="Row" IsTextAutoFit="False" Docking="Bottom" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold" Alignment="Center"></asp:legend>
  </legends>
  <ChartAreas>
    <asp:ChartArea Name="ChartArea1">
    </asp:ChartArea>
  </ChartAreas>
</asp:Chart>

OK了,现在我们再为图表添加一个背景,再调整一个宽度和高度,调整后的代码完整如下:

<asp:Chart ID="Chart1" runat="server" Width="412px" Height="296px">
  <legends>
    <asp:legend LegendStyle="Row" IsTextAutoFit="False" Docking="Bottom" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold" Alignment="Center"></asp:legend>
  </legends>
  <borderskin skinstyle="Emboss"></borderskin>
  <ChartAreas>
    <asp:ChartArea Name="ChartArea1">
    </asp:ChartArea>
  </ChartAreas>
</asp:Chart>

嗯,感觉好看多了.但是我们不想柱形图表,那样不够直接,我们想要曲线图!
这时,我们需要在后台代码里添加设置了,具体如下:

foreach (Series ser in Chart1.Series)
{
  //注意:需要引用空间
  //    using System.Web.UI.DataVisualization.Charting;
  ser.ChartType = SeriesChartType.Spline; //设置图表样式
}

一个简单的循环遍历帮我们达成了任务.
这里我们需要明白的是,对于一个图表来说,第一组数据就是Series序列,这些都存储在了Chart的Series属性里!
Chart1.Series是一个数组(或者说是一个关联数组,你可以对Series命名,然后通过name来索引.
这里我去掉上面的代码,仅设置了一个Series的样式:

Chart1.Series[0].ChartType = SeriesChartType.Line;

保存,然后运行,哈,就了柱形与曲线的混合图表了!!


如果我们要设置更多的样式,我们可以详细设置一下Series的属性:

//注意:需要引用如下命名空间:
/*
* using System.Drawing;
* using System.Drawing.Text;
* using System.Drawing.Imaging;
* using System.Web.UI.DataVisualization.Charting;
*/
MarkerStyle marker = MarkerStyle.Star4; //设置坐标点的样式
foreach (Series ser in Chart.Series)
{
  ser.ShadowOffset = 2;
  ser.BorderWidth = 2;
  ser.ChartType = SeriesChartType.Spline; //设置
  ser.MarkerSize = 12;
  ser.MarkerStyle = marker;   //坐标点
  ser.MarkerBorderColor = Color.FromArgb(64, 64, 64);
  ser.Font = new Font("Trebuchet MS", 8, FontStyle.Bold);
  marker++;
}

各个属性的说明,大家可以查阅一下相关的文档说明,还是很容易就明了的!
如果我们想看某一家店当月每天在当月销售中所在的比例呢?这时用一个"饼状图"来展示就很清晰了.
我们在前台再添加一个Chart:

<asp:Chart ID="Chart2" runat="server" Width="412px" Height="296px">
  <legends>
    <asp:legend IsEquallySpacedItems="True" IsTextAutoFit="False" Docking="Right" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold"></asp:legend>
  </legends>
  <borderskin skinstyle="Emboss"></borderskin>
  <Series>
    <asp:Series Name="Series1">
    </asp:Series>
  </Series>
  <ChartAreas>
    <asp:ChartArea Name="ChartArea1">
    </asp:ChartArea>
  </ChartAreas>
</asp:Chart>

然后继续在后台绑定数据,并稍加设置就OK了:

cmd = new OleDbCommand("select * from chart where mShopping='s001' order by mMonth asc",conn);
OleDbDataReader dr2 = cmd.ExecuteReader();
Chart2.Series[0].Points.DataBind(dr2, "mMonth", "mMoney", "");/*#PERCENT{}*/
Chart2.Series[0].ChartType = SeriesChartType.Pie;
Chart2.Series[0].LegendText = "#AXISLABEL";
Chart2.Series[0].Label = "#PERCENT{P1}";
Chart2.Series[0].ToolTip = "#AXISLABEL #VALY{C}";

需要注意的是,如果"mMonth"字段也是数值的话,这时:

Chart2.Series[0].LegendText = "#AXISLABEL";这个设置可能就无效了,图示会也显示为百分比!

样式：

            foreach (Series ser in this.chLineChart.Series)
            {
                MarkerStyle marker = MarkerStyle.Circle; //设置坐标点的样式
                ser.BorderWidth = 2;
                ser.ChartType = SeriesChartType.Spline; //设置
                ser.MarkerSize = 12;
                ser.MarkerStyle = marker;   //坐标点
                ser.MarkerBorderColor = Color.FromArgb(64, 64, 64);
                ser.Font = new Font("Trebuchet MS", 8, FontStyle.Bold);
                marker++;
            }

以上为转载
Tip：绘制柱状图时，会从不是0的数据开始画，如：时间是2013-04~2013-09，只有08月有数据，那么08月的柱子会到04月那里，so要用日期左

关联数据，没有数据的月份用0表示出来，如是多柱状图显示，那么在数据源是分别查询，用union连接数据集。绘制折线图时，当有多条折线时，需

分别绘制。
当有关文件夹报错时，检查web.config是否有

<appSettings>
    <add key="ChartImageHandler" value="storage=file;timeout=20;Url=../TJChart/TempImageFiles/;" />
</appSettings>

及对应的文件夹，该文件夹为缓存图片文件夹，建议新建一个文件在里面，因为在发布时空文件夹会被认为是无效文件夹不生成的。具体的数据绑定方法，

在C#中有，不解释。