欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

asp.net微软图表控件使用示例代码分享

程序员文章站 2024-02-26 14:43:52
复制代码 代码如下:     

复制代码 代码如下:

<configuration>
  <system.webserver>
    <handlers>
      <remove name="chartimagehandler" />
      <add name="chartimagehandler" precondition="integratedmode" verb="get,head,post"
        path="chartimg.axd" type="system.web.ui.datavisualization.charting.charthttphandler, system.web.datavisualization, version=4.0.0.0, culture=neutral, publickeytoken=31bf3856ad364e35" />
    </handlers>
  </system.webserver>
  <system.web>
    <httphandlers>
      <add path="chartimg.axd" verb="get,head,post" type="system.web.ui.datavisualization.charting.charthttphandler, system.web.datavisualization, version=4.0.0.0, culture=neutral, publickeytoken=31bf3856ad364e35"
        validate="false" />
    </httphandlers>
  </system.web>
</configuration>

复制代码 代码如下:

<%@ page language="c#" autoeventwireup="true" codefile="chart.aspx.cs" inherits="chart" %>

<%@ register assembly="system.web.datavisualization, version=4.0.0.0, culture=neutral, publickeytoken=31bf3856ad364e35"
    namespace="system.web.ui.datavisualization.charting" tagprefix="asp" %>

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>mschart图表控件</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:chart id="chart1" runat="server" width="500px" borderdashstyle="solid" palette="brightpastel" imagetype="png"  backsecondarycolor="white" backgradientstyle="topbottom" borderwidth="2" backcolor="#d3dff0" bordercolor="26, 59, 105">
            <titles>
                <asp:title font="微软雅黑, 16pt" name="title1" text="统计表">
                </asp:title>
            </titles>
            <borderskin skinstyle="emboss"></borderskin>
            <series>
                <asp:series name="series1"  charttype="bubble" markersize="8" markerstyle="circle">
                </asp:series>
            </series>
            <chartareas>
                <asp:chartarea name="chartarea1"  bordercolor="64, 64, 64, 64" backsecondarycolor="transparent" backcolor="64, 165, 191, 228" shadowcolor="transparent" backgradientstyle="topbottom">
                </asp:chartarea>
            </chartareas>
        </asp: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>
        <br/>

        <asp:chart id="chart3" runat="server">
            <series>
                <asp:series name="series1">
                </asp:series>
            </series>
            <chartareas>
                <asp:chartarea name="chartarea1">
                </asp:chartarea>
            </chartareas>
        </asp:chart>

        <asp:chart id="chart4" runat="server">
        <legends>
            <asp:legend title="金牌榜"></asp:legend>
        </legends>
            <series>
                <asp:series name="series1">
                </asp:series>
            </series>
            <chartareas>
                <asp:chartarea name="chartarea1">
                </asp:chartarea>
            </chartareas>
        </asp:chart>
    </div>
    </form>
</body>
</html>

复制代码 代码如下:

using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.data;
using system.web.ui;
using system.web.ui.webcontrols;
//add
using system.drawing;

public partial class chart : system.web.ui.page
{
    protected void page_load(object sender, eventargs e)
    {
        datatable dt = creatdata();
        getstyle1(dt);
        getstyle2(dt);
        getstyle3(dt);
        getstyle4(dt);
    }


    protected void getstyle1(datatable dt)
    {
        #region 折线图
        chart1.datasource = dt;//绑定数据
        chart1.series["series1"].charttype = system.web.ui.datavisualization.charting.seriescharttype.line;//设置图表类型
        chart1.series[0].xvaluemember = "country";//x轴数据成员列
        chart1.series[0].yvaluemembers = "score";//y轴数据成员列
        chart1.chartareas["chartarea1"].axisx.title = "国家";//x轴标题
        chart1.chartareas["chartarea1"].axisx.titlealignment = stringalignment.far;//设置y轴标题的名称所在位置位远
        chart1.chartareas["chartarea1"].axisy.title = "金牌";//x轴标题
        chart1.chartareas["chartarea1"].axisy.titlealignment = stringalignment.far;//设置y轴标题的名称所在位置位远
        chart1.chartareas["chartarea1"].axisx.interval = 1;//x轴数据的间距
        chart1.chartareas["chartarea1"].axisx.majorgrid.enabled = false;//不显示竖着的分割线
        chart1.series[0].isvalueshownaslabel = true;//显示坐标值
        #endregion
    }


    protected void getstyle2(datatable dt)
    {
        #region 样条图(平滑曲线)
        chart2.datasource = dt;//绑定数据
        chart2.series["series1"].charttype = system.web.ui.datavisualization.charting.seriescharttype.spline;//设置图表类型
        chart2.series["series1"].markerstyle = system.web.ui.datavisualization.charting.markerstyle.cross;//设置点的样式,十字形
        chart2.series[0].xvaluemember = "country";//x轴数据成员列
        chart2.series[0].yvaluemembers = "score";//y轴数据成员列
        chart2.chartareas["chartarea1"].axisx.title = "国家";//x轴标题
        chart2.chartareas["chartarea1"].axisx.titlealignment = stringalignment.far;//设置y轴标题的名称所在位置位远
        chart2.chartareas["chartarea1"].axisy.title = "金牌";//x轴标题
        chart2.chartareas["chartarea1"].axisy.titlealignment = stringalignment.far;//设置y轴标题的名称所在位置位远
        chart2.chartareas["chartarea1"].axisx.interval = 1;//x轴数据的间距
        chart2.chartareas["chartarea1"].axisx.majorgrid.enabled = false;//不显示竖着的分割线
        chart2.series[0].isvalueshownaslabel = true;//显示坐标值
        #endregion
    }

    protected void getstyle3(datatable dt)
    {
        #region 条形图
        chart3.datasource = dt;//绑定数据
        chart3.series["series1"].charttype = system.web.ui.datavisualization.charting.seriescharttype.bar;//设置图表类型
        chart3.series[0].xvaluemember = "country";//x轴数据成员列
        chart3.series[0].yvaluemembers = "score";//y轴数据成员列
        chart3.chartareas["chartarea1"].axisx.title = "国家";//x轴标题
        chart3.chartareas["chartarea1"].axisx.titlealignment = stringalignment.far;//设置y轴标题的名称所在位置位远
        chart3.chartareas["chartarea1"].axisy.title = "金牌";//x轴标题
        chart3.chartareas["chartarea1"].axisy.titlealignment = stringalignment.far;//设置y轴标题的名称所在位置位远
        chart3.chartareas["chartarea1"].axisx.interval = 1;//x轴数据的间距
        chart3.chartareas["chartarea1"].axisx.majorgrid.enabled = false;//不显示竖着的分割线
        chart3.series[0].isvalueshownaslabel = true;//显示坐标值
        #endregion
    }


    protected void getstyle4(datatable dt)
    {
        #region 饼形图
        chart4.datasource = dt;//绑定数据
        chart4.series["series1"].charttype = system.web.ui.datavisualization.charting.seriescharttype.pie;//设置图表类型
        chart4.series[0].xvaluemember = "country";//x轴数据成员列
        chart4.series[0].yvaluemembers = "score";//y轴数据成员列
        chart4.series[0].legendmapareaattributes = "country"; //显示国家
        chart4.series[0].isvalueshownaslabel = true;//显示坐标值
        #endregion

    }
    /// <summary>
    /// 创建一张二维数据表
    /// </summary>
    /// <returns>datatable类型的数据表</returns>
    protected datatable creatdata()
    {
        datatable dt = new datatable();
        dt.columns.add("country", system.type.gettype("system.string"));
        dt.columns.add("score", system.type.gettype("system.string"));
        string[] n = new string[] { "中国","美国", "俄罗斯", "英国" };
        string[] c = new string[] { "85","80", "50", "35" };
        for (int i = 0; i < 4; i++)
        {
            datarow dr = dt.newrow();
            dr["country"] = n[i];
            dr["score"] = c[i];
            dt.rows.add(dr);
        }
        return dt;
    }
}

asp.net微软图表控件使用示例代码分享