绘制统计图表
 
在概率和统计方法中，经常需要绘制图表从而直观地展现数据。下面简介几种常用统计图表绘图函数.
 

 


 
文章目录
 
绘制统计图表
1. 正整数频率表
2. 经验累积分布函数图形
3. 最小二乘拟合曲线
4. 正态分布概率图形
5. Weibull概率图形
6. 样本数据盒图
7. 为图形增加参考线
8. 为图形增加多项式曲线
9. 绘制样本概率图形
10. 绘制附加有正态密度曲线的直方图
11. 在指定的界线间绘制正态密度曲线
 

 

 
1. 正整数频率表
 
绘制正整数频率表的函数为 $tabulate$.
 
table = tabulate(X)
 
 
 
$X$ 为正整数构成的向量，返回三列：
首列包含 $X$ 的值，第二列为这些值的个数，第三列为这些值的频率。
 
 
[例]
 
>> A = [1 1 4 5 1 4 1 9 1 9 8 1 0];
>> tabulate(A)
  Value    Count   Percent
      0        1      7.69%
      1        6     46.15%
      4        2     15.38%
      5        1      7.69%
      8        1      7.69%
      9        2     15.38%
>> 
 

 
2. 经验累积分布函数图形
 
绘制经验累积分布函数图形的函数为 $cdfplot$.
 
1. cdfplot(X)
2. h = cdfplot(X)
3. [h,stats] = cdfplot(X)
 
 
 
作样本 $X$ 的累积分布函数图形
$h$ 表示曲线的环柄。
$stats$ 表示样本的一些特征。
 
 
[例]
 
>> X = normrnd(0,1,114,1);
>> [h,stats] = cdfplot(X)
 
h = 

  Line with properties:

              Color: [0 0.4470 0.7410]
          LineStyle: '-'
          LineWidth: 0.5000
             Marker: 'none'
         MarkerSize: 6
    MarkerFaceColor: 'none'
              XData: [1×230 double]
              YData: [1×230 double]
              ZData: [1×0 double]

  Show all properties


stats = 

  struct with fields:

       min: -2.9443                 %样本最小值
       max: 3.5784                  %样本最大值
      mean: 0.1015                  %样本均值
    median: 0.0930                  %样本中间值
       std: 1.1459                  %样本标准差
 
经验累积分布函数图像如下图所示：
 
 

 
3. 最小二乘拟合曲线
 
绘制最小二乘拟合曲线的函数为 $lsline$.
 
h = lsline
 
 
 
$h$ 为直线的句柄。
 
 
[例]
 
>> x=linspace(0,10);
>> y=x+rand(size(x));
>> scatter(x,y)
>> h=lsline;
>> set(h,'LineWidth',3,'LineStyle','--','Color',[1 0 1])
 
运行后得到最小二乘拟合直线如下图所示：
 
 

 
4. 正态分布概率图形
 
绘制正态分布概率图形的函数是 $normplot$.
 
1. normplot(X)
2. h = normplot(X)
 
 
 
若 $X$ 为向量，则显示正态分布概率图形；若 $X$ 为矩阵，则显示每一列的正态分布概率图形。
返回绘图直线的句柄。
 
 
[例]
 
>> X = [1,1,4;5,1,4;1,9,1;9,8,1]

X =

     1     1     4
     5     1     4
     1     9     1
     9     8     1
 

>> h = normplot(X)

h = 

  9×1 Line array:

  Line
  Line
  Line
  Line
  Line
  Line
  Line
  Line
  Line

>> normplot(X)
 
所得正态分布概率图形如下图所示：
 
 

 
5. Weibull概率图形
 
绘制 Weibull 概率图形的函数为 $weibplot$ .
 
1. weibplot(X)
2. h = weibplot(X)
 
 
 
若 $X$ 为向量，则显示 Weibull 概率图形；若 $X$ 为矩阵，则显示每一列的 Weibull 概率图形。
返回绘图直线的句柄。
 
 
[例]
 
>> X = [1,1,4;5,1,4;1,9,1;9,8,1]

X =

     1     1     4
     5     1     4
     1     9     1
     9     8     1
 
weibplot(X)
 
运行后得到 Weibull 概率图形如下图所示：
 
（然而本飞舞的MATLAB上并没有这个函数，哭哭，，，）
 

 
6. 样本数据盒图
 
绘制样本数据盒图的函数是 $boxplot$.
 
1. boxplot(X)
2. boxplot(X,notch)
3. boxplot(X,notch,'sym')
4. boxplot(X,notch,'sym',vert)
5. boxplot(X,notch,'sym',vert,whis)
 
 
 
产生矩阵 $X$ 的每一列的盒图和“须”图.
$notch=1$ 时产生凹盒图，$notch=0$ 时产生矩箱图.
$sym$ 表示图形符号，默认为 “+”.
$vert=0$ 时生成水平盒图，$vert=1$ 时生成竖直盒图，默认值为1.
$whis$ 定义“须”图的长度，默认值为1.5.
 
 
[例]
 
>> x1 = normrnd(5,1,100,1);
>> x2 = normrnd(6,1,100,1);
>> x = [x1,x2];
>> boxplot(x,1,'g--',1,0)
 
运行后所得盒图如下图所示：
 
 

 
7. 为图形增加参考线
 
为当前图形增加一条参考线需调用函数 $refline$.
 
1. refline(slope,intercept)
2. refline(slope)
 
 
 
$slope$ 表示直线斜率，$intercept$ 表示直线截距.
$slope=[a,b]$：在图中绘制一条直线：$y=ax+b$.
 
 
[例]
 
>> y = [1.1 4.5 1.4 1.9 1.9 8.1 0.3 6.4 8.9 3.1 ]';
>> plot(y,'+')
>> refline(0,3.64)
 
运行后所得图形如下图所示：
 
 

 
8. 为图形增加多项式曲线
 
在当前图形上绘制一条多项式曲线的函数是 $refcurve$.
 
h = refcurve(p)
 
 
 
在图中加入一条多项式曲线：$h$ 为曲线的环柄，$p$ 为多项式系数向量：$p=[p_1,p_2,\cdots ,p_n]$，其中$p_1$ 为最高幂次项系数。
 
 
[例]
 
>> h = [114 514 191 981 036 436 419 191 981 145 141 919 810];
>> plot(h,'--')
>> refcurve([-5.14 114 0])
 
运行后所得多项式曲线图形如下图所示：
 
 

 
9. 绘制样本概率图形
 
绘制样本概率图形的函数为 $capaplot$.
 
p = capaplot(data,specs)
 
 
 
返回来自于估计分布的随机变量落在指定范围内的概率。$data$ 为所给的样本数据，$specs$ 指定范围，$p$ 表示在指定范围内的概率。
 
 
[例]
 
>> h = [114 514 191 981 036 436 419 191 981 145 141 919 810];
>> s = [364,514];
>> p = capaplot(h,s)
 
p =

    0.1665

>> 
 
运行后所得图形如下图所示.
 
 

 
10. 绘制附加有正态密度曲线的直方图
 
绘制附加有正态密度分布曲线的直方图的函数是 $hisfit$.
 
1. hisfit(data)
2. hisfit(data,nbins)
 
 
 
$data$ 为向量，函数返回直方图和正态曲线。
$nbins$ 为指定 $bar$ 个数的量。
 
 
[例]
 
>> r = normrnd(10,1,100,1);
>> histfit(r)
 
运行后所得附有正态密度分布曲线直方图如下图所示.
 
 

 
11. 在指定的界线间绘制正态密度曲线
 
在指定界线间绘制正态密度曲线的函数是 $normspec$.
 
p = normspec(specs,mu,sigma)
 
 
 
$specs$ 指定界线，$mu$，$sigma$ 为正态分布的参数，$p$ 为样本落在上、下界之间的概率.
 
 
[例]
 
>> normspec([10 Inf],11.4,5.14)

ans =

    0.6073

>> 
 
运行后所得在指定界限间绘制正态密度曲线如下图所示.
 
 

近期项目中要做些统计图表，而做统计图表的前端框架也有不少，听朋友说Highcharts做统计图表页面效果还错就到网上下了个Highcharts的框架研究了下，刚开始研究的时候遇到了些问题花了我不少的时间，而且API和网上的资料大部分都是静态的图标展现让刚接触的人很容易走进一些误区，下面就将我做的几个简单的demo拿出来分享下：



用Highcharts制作统计图表主要引用的js是jquery和highcharts.js这两个就OK了，就能实现我demo中的这些统计图。



1、柱状图

 页面：

 <div id="containerColumn" style="width: 800px; height: 400px; margin: 0 auto"></div>



 js生成图表的就是：



 //柱状图

 function countDepartment(){

 $(function(){

 var x = [];//X轴

 var y = [];//Y轴

 var xtext = [];//X轴TEXT

 var color = ["gray","pink","red","blue","yellow","green","#CCC"];

 $.ajax({

 type:"post",

 url:"userquery.do?method=countDepart",

 success:function(result){

 var json = eval("(" + result + ")");

 for (var key in json.list){

 json.list[key].y = json.list[key].num;

 xtext[key] = json.list[key].departname;

 json.list[key].color = color[key];

 }

 chart.series[0].setData(json.list);//数据填充到highcharts上面

 },

 error:function(e){



 }

 });



 var chart = new Highcharts.Chart({

 chart:{

 renderTo:'containerColumn',

 type:'column' //显示类型 柱形

 },

 title:{

 text:'部门人数统计图' //图表的标题

 },

 xAxis:{

 categories:xtext

 },

 yAxis:{

 title:{

 text:'人数' //Y轴的名称

 },

 },

 series:[{

 name:"部门人数"

 }]

 });

 });

 }



 在制作柱状图时要注意的是后台传到页面的json格式数据，如果数据格式不对图表就会不显示，后台传到页面的json格式：{"list":[{"departname":"HTC","num":1},{"departname":"三星","num":1},{"departname":"aple","num":1}]





2.饼状图

<div id="containerPie" style="min-width:400px;height:400px"></div>



js生成图表：



//饼状图

 function countPie(){

 $(function () {

 var dpie ={

 chart: {

 renderTo:'containerPie',

 plotBackgroundColor: null,

 plotBorderWidth: null,

 plotShadow: false

 },

 title: {

 text: '饼状统计图'

 },

 tooltip: {

 pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

 },

 plotOptions: {

 pie: {

 allowPointSelect: true,

 cursor: 'pointer',

 dataLabels: {

 enabled: true,

 format: '<b>{point.name}</b>: {point.percentage:.1f} %',

 style: {

 color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'

 }

 }

 }

 },

 series: [{

 type: 'pie',

 name: '占百分比'

 }]

 };



 $.ajax({

 type:"post",

 url:"userquery.do?method=countPie",

 success:function(result){

 dpie.series[0].data = eval(result); 

 new Highcharts.Chart(dpie);

 }

 });

 });

 }



 后台传的json格式：[["张三",7],["李四",13],["王五",80]]



 3.曲线图



 <div id="containerScatter" style="min-width:700px;height:400px"></div>



 js生成图表：



 //曲线图

 function countScatter(){

 $(function () {

 var chart = {

 chart: {

 //显示的div

 renderTo: 'containerScatter',

 //图形类型

 defaultSeriesType: 'spline'

 },

 title: {

 text: '按月统计',

 x: -20 //center

 },

 subtitle: {

 text: '巡检次数',

 x: -20

 },

 xAxis: {

 title: {

 enabled: true

 },

 tickPixelInterval:50,

 categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月']

 },

 yAxis: {

 title: {

 text: '次数(次)'

 },

 plotLines: [{

 value: 0,

 width: 1,

 color: '#808080'

 }]

 },

 tooltip: {

 valueSuffix: '次'

 },

 legend: {

 layout: 'vertical',

 align: 'right',

 verticalAlign: 'middle',

 borderWidth: 0

 },

 series:[]

 };



 $.ajax({

 type:"post",

 url:"userquery.do?method=countScatter",

 success:function(result){

 var data = eval("(" + result + ")"); 

 chart.series=data;

 new Highcharts.Chart(chart);

 }

 });

 }); 

 }



 后台传的json格式：[{"name":"北京","data":[7,6,9,14,18,21,6,8,12,18,13,9]},{"name":"纽约","data":[6,5,8,6,7,15,3,4,13,11,5,8]},{"name":"柏林","data":[8,7,6,11,8,9,0,7,6,13,7,8]}]



好了demo的主要实现代码都贴出来了，希望能给需要帮助的小伙伴一点帮助，在这我要提醒下就是在Highcharts制作图表需要注意的地方就是json的格式和数据绑定。



附件中是我demo的效果图 :D

本文介绍了在ASP.NET MVC中使用ECharts的详细过程，希望对使用该方法的朋友有所帮助。
 相关Echarts的js文件包括：echarts.min.js、echarts-wordcloud.min.js、china.js、jquery-3.4.1.min.js
 相关Echarts的js文件包下载
 提取码：tfr3
 
一、首先去百度搜索Echarts去下载需要的图表实例
 
Echarts图表实例下载。其中可以自定义下载，也可以下载全部，根据个人需求进行实例的下载即可！或者直接点击上方链接直接下载
 
二、创建DAL与BLL层（可不创建DAL与BLL,可直接将访问数据库的代码写在控制器Controllers中）
 
将需要显示的数据信息利用DAL层以及BLL层写好！例如 DAL层：
 
   		public static List<Student> SelectClassInfo()
        {
            using (ExamDBEntities db = new ExamDBEntities())
            {
             //利用EF框架通过分组查询男女生人数，其中Name：代表数据库中的性别；Nums：代表查询出来的人数
                var all = db.Student.GroupBy(s => new { s.StuSex}).Select(s => new { Name =  s.Key.StuSex, Nums = s.Count() }).ToList();
                var list = new List<Student>();
                foreach (var temp in all)
                {
                //为了方便数据显示，重新new了Student对象,将Name赋值给StuSex，将Nums赋值给StuID
                    var energyFlowGraph = new Student();
                    energyFlowGraph.StuSex = temp.Name;
                    energyFlowGraph.StuID = temp.Nums;
                    list.Add(energyFlowGraph);
                }
                return list;
            }
        }
 
BLL层
 
  		public static List<Student> ClassInfo()
        {
            return EchartsService.SelectClassInfo();
        }
 
三、创建控制器Controller，在控制器创建操作方法（这是创建了DAL层与BLL层的控制器代码）根据自己的需求选择控制器Controller中 三or四中的代码
 
注意：
 1、创建的操作方法不能用来生成视图的，不然会报错：找不到该资源路径！！！；需要创建一个HttpGet方法的操作方法来生成视图页面
 2、操作方法的返回类型是使用JsonResult，而不是ActionResult,，并且返回的数据是Json
 
  		[HttpPost]
        public JsonResult GetEchartsPie()
        {
            //声明两个动态数据，存储循环出来的数据
            ArrayList xAxisData = new ArrayList();
            ArrayList yAxisData = new ArrayList();
            //调用BLL层代码
            var list = EchartsManager.ClassInfo();
            //循环list将数据循环存储在动态数组中
            foreach (var item in list)
            {
                xAxisData.Add(item.StuSex ? "男" : "女");//通过三目元算符将Bool值“true”或“false”转换成男或女
                yAxisData.Add(item.StuID);
            }
            //多个
            //result = new object[] { new { xname = xAxisData, num = yAxisData }, new { } };
            var result = new { Sex = xAxisData, Num = yAxisData };
            return Json(result);
        }

 
四、创建控制器Controller，在控制器创建操作方法（这是没有创建DAL层与BLL层的控制器代码）
 
循环遍历可以不用写，直接转换成Json数据格式，根据自己的需求来选择1方法或者2方法
 
   		[HttpPost]
        public JsonResult GetEchartsIndex()
        {
            using (ExamDBEntities db = new ExamDBEntities())
            {
                //循环遍历可以不用写，直接转换成Json数据格式，根据自己的足需求来选择1方法或者2方法
                //1、循环遍历添加数据
                var all = db.Student.GroupBy(s => new { s.StuSex }).Select(s => new { Name = s.Key.StuSex, ID = s.Count() }).ToList();
                //声明两个动态数据，存储循环出来的数据
                ArrayList xAxisData = new ArrayList();
                ArrayList yAxisData = new ArrayList();
                //循环list将数据循环存储在动态数组中
                foreach (var item in all)
                {
                    xAxisData.Add(item.Name ? "男" : "女");//通过三目元算符将Bool值“true”或“false”转换成男或女
                    yAxisData.Add(item.ID);
                }
                var result = new { Sex = xAxisData, Num = yAxisData };
                return Json(result,JsonRequestBehavior.AllowGet);
                
				//2、不循环添加数据直接数据Json化数据
                var all = db.Student.GroupBy(s => new { s.StuSex }).Select(s => new { Name = s.Key.StuSex, ID = s.Count() }).ToList();
                return Json(new { data= all },JsonRequestBehavior.AllowGet);
            }
        }
 
五、在项目中创建一个新视图或者打开你需要放图表的视图页面
 
在新的视图页面或者你需要显示图表的视图页面中创建div，并且为div设置CSS样式；同时引用jquery-3.4.1.min.js（使用了布局页面的就不需要引用jquery）、echarts.min.js。【注意】必须先引用jquery，不然会报错！因为Echarts是基于JQuery库；width和height根据自己的需要自行设定。
 
@{
    ViewBag.Title = "Home Page";
}
@* 男女生人数柱状图 *@
<div id="main" style="width: 500px; height:400px"></div>
@* 男女生人数饼状图 *@
<div id="Pie" style="width: 600px; height:400px"></div>

@section scripts{
    <script src="~/Scripts/echarts.min.js"></script>
    <script type="text/javascript">
        //男女生人数比例柱状图
        $(function () {
            Bar();
        });
        var names = [];	//定义数组，数组可自由定义
        var scores = [];
        function Bar() {
            $.ajax({
                url: "/Home/GetEchartsIndex",
                type: "post",
                async: false,
                dataType: "json",
                success: function (result) {
                //根据自己的希求以及熟练程度选择for循环或者$.each循环方法
                //for循环遍历所需的数据
                    for (var i = 0; i < result.Num.length; i++) {
                        scores[i] = JSON.parse(result.Num[i]);//以特定的JSON的格式接收数字
                    }
                    for (var i = 0; i < result.Sex.length; i++) {
                        names[i] = result.Sex[i];//以JSON的方式接收字符串
                    }
                    //$.each方法遍历所需的数据
					$.each(result.data, function (index, item) {
                        names.push(item.Name?"男":"女");//通过三目元算符将Bool值“true”或“false”转换成男或女
                        scores.push(item.ID )
                    });
                    //调用柱状图方法
                    InitChart(names, scores);
                },
                error: function (error) {
                    alert("Ajax获取服务器数据出错了！" + error);
                }
            });
        }
        //创建一个方法来封装柱状图
        function InitChart(names, scores) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));//初始化echarts
            option = {
                title: {
                    text: '各班男女生人数',//可视化主标题
                    textStyle: {//主标题的样式
                        color: 'red',
                        fontWeight: 'bold',
                        fontStyle: 'italic',
                        fontFamily: '微软雅黑'
                    },
                    subtext: '男女生人数对比',//副标题
                    subtextStyle: {//副标题的样式
                        color: 'black',
                        fontFamily: '微软雅黑'
                    },
                    x: 'center'
                },
                grid: {
                    top: '20%',
                },
                xAxis: {
                    name: '性别',
                    type: 'category',
                    data: names,
                    axisLabel: {
                        rotate: '35',
                        interval: 0
                    }
                },
                //提示框组件
                tooltip: {
                    trigger: 'axis',//触发类型；item:数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                },
                //工具组件：如：下载保存统计图表、切换为折线图、切换为柱状图
                toolbox: {
                    feature: {
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '人数',
                },
                series: [{
                    data: scores,
                    type: 'bar',//图形类型
                    label: {
                        normal: {
                            formatter: "{c}" + "人",//数据格式化
                            show: true,
                            position: 'top',//数据显示的位置，事例中显示在顶部
                            textStyle: {//显示的数据样式
                                color: 'black',
                                fontFamily: '微软雅黑'
                            }
                        }
                    },
                }]
            };
            // 使用刚指定的配置项和数据显示图表-绑定数据
            myChart.setOption(option);
        }

        //男女生人数比例饼状图
        $(function () {
            Pie();
        });
        var Sex = [];	//定义数组
        var Info = [];
        function Pie() {
            $.ajax({
                url: "/Home/GetEchartsPie",
                type: "post",
                async: false,
                dataType: "json",
                success: function (result) {
                //for循环遍历所需的数据
                    for (var i = 0; i < result.Num.length; i++) {
                        Info[i] = { value: result.Num[i], name: result.Sex[i] };
                    }
                    for (var i = 0; i < result.Sex.length; i++) {
                        Sex[i] = result.Sex[i];//以JSON的方式接收字符串
                    }
                    //调用饼状图方法
                    InitPie(Sex, Info);
                },
                error: function (error) {
                    alert("Ajax获取服务器数据出错了！" + error);
                }
            });
        }
        //创建一个方法来封装饼状图
        function InitPie(Sex, Info) {
            //获取页面div的id属性
            // 基于准备好的dom，初始化echarts实例
            var myChartPie = echarts.init(document.getElementById('Pie'));
            option_Pie = {
                title: {
                    text: '男女生人数',	//可视化主标题
                    textStyle: {
                        color: 'red',
                        fontWeight: 'bold',
                        fontStyle: 'italic',
                        fontFamily: '微软雅黑'
                    },	//主标题的样式
                    subtext: '男女生人数对比',	//副标题
                    subtextStyle: {
                        color: 'black',
                        fontFamily: '微软雅黑'
                    },	//副标题的样式
                    x: 'center'
                },
                //图例
                legend: {
                    data: Sex,
                    orient: 'vertical',	//图例列表的布局朝向，取值：'vertical'/'horizontal'
                    left: '10%',
                },
                //提示框组件
                tooltip: {
                    trigger: 'item',	//触发类型；item:数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                    formatter: "{a}<br/>{b} ：{c}人 ({d}%)"
                },
                //工具组件：如：下载保存统计图表、切换为折线图、切换为柱状图
                toolbox: {
                    feature: {
                        saveAsImage: { show: true }
                    }
                },
                label: {
                    show: true,
                },
                series: [{
                    name: '性别',
                    radius: '50%',// 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
                    center: ['50%', '55%'], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
                    data: Info,
                    type: 'pie',
                }]
            };
            // 使用刚指定的配置项和数据显示图表-绑定数据
            myChartPie.setOption(option_Pie);
        }
    </script>
}
 
柱状图效果图：
 
 饼状图效果图：
 

 
 

  
在使用ASP.net进行Web开发中，经常需要将各种统计数据以图形的方式显示出来。如果仅仅是柱状图，可以采用画表格或者将某种特定颜色的GIF图像缩放宽度和高度的方法来表示，许多投票程序多采用这种方法。但如果要求输出结果是饼状图或者是连续的波形图，就有些困难了。本文特向大家介绍使用OWC图形组件轻松实现绘制统计图表的方法。
  
　　OWC（Microsoft Office Web Components）是 Microsoft Office 使用的数据绑定 ActiveX 控件，用于向 Web 页添加图表功能。OWC支持Microsoft Excel 2000中大部分的二维图表(如折线图、柱形图、股价图等)和极坐标图表(如饼图和雷达图)，并支持组合图表，如两轴线-柱图，数据表会随同图表发布，图表随着数据的变化而改变。OWC能将处理结果做为标准GIF输出并下载到浏览器中显示。
  
　　首先，使用ADODB.Recordset读出数据集合，并与OWC组件进行数据绑定：
  
Dim owcChartSpace As OWC.ChartSpace = New OWC.ChartSpace() 
Dim owcChart As OWC.WCChart = owcChartSpace.Charts.Add 
Dim ConnADO As New ADODB.Connection() 
Dim RecordsetADO As New ADODB.Recordset() 
Dim connectionString As String 
connectionString = "Provider=Microsoft.Jet.OLEDB.4.0;" & _ 
"Data Source=" & Server.MapPath("Grades.mdb") 
ConnADO.Open(connectionString)
  
RecordsetADO.ActiveConnection = ConnADO 
RecordsetADO.CursorType = ADODB.CursorTypeEnum.adOpenStatic 
RecordsetADO.CursorLocation = ADODB.CursorLocationEnum.adUseClient 
Dim strSQL As String 
strSQL = "Select city, month, temperature From test order by city,ids" 
RecordsetADO.Open(strSQL, ConnADO) 
owcChartSpace.DataSource = RecordsetADO
  


  
　　然后，指定OWC的显示类型：
  
owcChart.Type = OWC.ChartChartTypeEnum.chChartTypeSmoothLineMarkers
  


  
　　在运行时向OWC中输入数据有多种方法。所有这些方法都要用到 SetData 方法来真正将数据写入 Chart 组件，因此将详细介绍此方法。SetData 方法应用于 WCChart、WCErrorBars 和 WCSeries 对象并能向这三种对象输入数据。
  
　　SetData 方法有三个参数：Dimension、DataSourceIndex 和 DataReference。Dimension 参数引用图表中被填充数据的一部分。可用的维度常数为 SeriesNames、Categories、Values、YValues、XValues、OpenValues、CloseValues、HighValues、LowValues、BubbleValues、RValues 和 ThetaValues。这些常数每一种都引用了图表的一部分；例如，SeriesNames 常数引用了每个序列名，OpenValues 和 CloseValues 常数引用股票图的开盘价和收盘价等等。每个常数都是作为诸如 chDimSeriesNames、chDimCategories、chDimValues等窗体中的枚举常数而传递给该方法的。
  
　　这里，我们使用SetData 方法给OWC赋值：
  
owcChart.SetData(OWC.ChartDimensionsEnum.chDimSeriesNames, 0, "city") 
Dim owcSeries As OWC.WCSeries 
For Each owcSeries In owcChart.SeriesCollection 
owcSeries.SetData(OWC.ChartDimensionsEnum.chDimCategories, 0, "month") 
owcSeries.SetData(OWC.ChartDimensionsEnum.chDimValues, 0, "temperature") 
Next
  


  
　　最后，将OWC处理结果转换成Gif图象输出到浏览器中显示：
  
Randomize() 
Dim nfilenameSuffix As Integer 
Dim sfilenamesuffix As String 
nfilenameSuffix = 100000 * Rnd() 
sfilenamesuffix = System.Convert.ToString(nfilenameSuffix) 
owcChartSpace.ExportPicture(MapPath("owc/price_") 
　　　　+ sfilenamesuffix + ".gif", "gif", 800, 600) 
Image1.ImageUrl = "owc/price_" + sfilenamesuffix + ".gif"
  

　　如果变换OWC的显示类型，即修改一下owcChart.Type，使之变成：
  
owcChart.Type = OWC.ChartChartTypeEnum.chChartTypeColumnClustered
  

　　在ASP.net中使用OWC可以帮助我们快速构造统计图表，而且由于OWC生成的结果是Gif图象，可以兼容客户端所有版本的浏览器，适用范围很广。本程序在Windows 2000 server、IIS5.0和IE6.0环境下运行。
  


 
 
 
转载于:https://blog.51cto.com/8881984/1405451