当前位置： 移动技术网 > IT编程>开发语言>.net > asp.net微软图表控件使用示例代码分享

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

朱泳婷,编织围巾,韩语歌曲学习

复制代码 代码如下:

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网