DundasWebChart开发实例一

最新推荐文章于 2021-05-10 13:42:47 发布

小K的大师兄

最新推荐文章于 2021-05-10 13:42:47 发布

阅读量3.2k

点赞数

分类专栏：图表组件文章标签： Dundas DundasWebChart 图表 .net

本文链接：https://blog.csdn.net/huangcailian/article/details/42079455

版权

图表组件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、Dundas简介

（1）Dundas Chart for .NET是由Dundas公司开发的图表控件，后被微软收购，该图表控件功能强大，分为WinForm和Web两种版本；

（2）尽管Dundas Chart for .NET的两个不同版本之间有很多共同之处，但它们是为不同的目的而设计的。 web版可为那些需要对图表进行大批量部署的用户提供更大的灵活性，而Windows Forms版则提供更强的交互性和性能；

（3）Dundas Chart for Windows Forms 可充分利用 GDI + 及其先进的功能，例如抗锯齿、alpha 混合和阴影，以在您的应用程序中加入别致的图表。还包含缩放、滚动、实时支持、以及对真实数据和时间的支持。支持所有常见图表样式和许多先进的图表样式，同时具备无与伦比的图表灵活性、定制化性能和易用性；

（4）Web版本的程序集为DundasWebChart.dll，Winform版本的程序集为DundasWinChart.dll，今天介绍一下DundasWebChart的使用。

二、项目引用

（1）要使用DundasWebChart，首先需要引用DundasWebChart.dll程序集，可以通过两种方式添加，一是手动在编译器中添加引用，这需要事先下载DundasWebChart.dll程序集；

（2）通过VS提供的NuGet程序包管理器进行引用，如图所以：

三、使用介绍

（1）DundasWebChart主要包含标题、图例、图表区域、图表Series等几个模块，每个模块都有自己的样式属性，在开发中根据实际需要设计相应模块的属性，如图：

（2）在设置某些属性时必选先绑定数据之后才能进行设置，所以我们可以按照以下方法来进行设置：

<1>先设置图表基本属性，如报表长度和宽度等；

<2>给图表绑定数据；

<3>设置图表样式属性。

或者先绑定图表数据，再设置图表样式属性。

四、开发实例

（1）前段设置

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LineChart.aspx.cs" Inherits="AspWebForm.Dundas.LineChart" %>

<%@ Register Assembly="DundasWebChart" Namespace="Dundas.Charting.WebControl" TagPrefix="DCWC" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <DCWC:Chart ID="Chart1" runat="server">
                <Series>
                    <DCWC:Series Name="Default"></DCWC:Series>
                </Series>
                <ChartAreas>
                    <DCWC:ChartArea Name="Default"></DCWC:ChartArea>
                </ChartAreas>
                <Titles>
                    <DCWC:Title Name="Default" Text="油井作业费历年变化趋势" Docking="Top"></DCWC:Title>
                </Titles>
            </DCWC:Chart>
        </div>
    </form>
</body>
</html>

可以将DundasWebChart控件添加到工具箱中，然后像WebForm控件一样进行拖动。

（2）后台代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;

using Dundas.Charting.WebControl;

namespace AspWebForm.Dundas
{
    public partial class LineChart : System.Web.UI.Page
    {
        #region Event Methods

        protected void Page_Load(object sender, EventArgs e)
        {
            DataBind();
            InitialChart();
        }

        #endregion

        #region Private Methods

        /// <summary>
        /// 初始化图表
        /// </summary>
        private void InitialChart()
        {
            #region 设置报表基本样式

            //设置Chart1的相关属性 
            Chart1.BackGradientEndColor = Color.Green;
            Chart1.BorderLineColor = Color.Green;
            Chart1.BorderLineWidth = 3;
            Chart1.BorderSkin.FrameBackColor = Color.MediumTurquoise;
            Chart1.BorderSkin.FrameBackGradientEndColor = Color.Teal;
            Chart1.Palette = ChartColorPalette.SemiTransparent;
            Chart1.Width = 600;
            Chart1.Height = 400;
            //设置图形样式
            Chart1.ImageType = ChartImageType.Jpeg;
            Chart1.AntiAliasing = AntiAliasing.All;

            #endregion

            #region 设置标题

            //添加一个默认的标题
            Chart1.Titles.Add("Default");
            Chart1.Titles[0].Text = "一周天气趋势";
            Chart1.Titles[0].Alignment = ContentAlignment.TopCenter;
            Chart1.Titles[0].Font = new Font("黑体", 12, FontStyle.Bold);
            Chart1.Titles[0].Color = Color.FromArgb(72, 72, 72);

            #endregion

            #region 设置Series

            //设置相应Series属性 
            Chart1.Series["Default"].Type = SeriesChartType.Line;//设置为折现风格 
            Chart1.Series["Default"].BorderColor = Color.Green;
            Chart1.Series["Default"].BackGradientType = GradientType.VerticalCenter;
            Chart1.Series["Default"].BackGradientEndColor = Color.Khaki;
            //设置折现的颜色 
            Chart1.Series["Default"].Color = Color.Green;
            Chart1.Series["Default"]["PointWidth"] = "0.7";
            //设置线条样式
            Chart1.Series["Default"].BorderStyle = ChartDashStyle.Solid;
            //设置当鼠标放在图形上时显示提示信息，#VALX对应X轴的值，#VAL{F4}对应Y轴的值并保留4为小数
            Chart1.Series["Default"].ToolTip = "#VALX" + "的温度是" + ": #VAL{F1}";
            //自定义X轴标签
            Chart1.Series["Default"].Points[1].AxisLabel = "五一";
            //设置柱形的最小(大)宽度--像素
            //Chart1.Series["Default"]["MinPixelPointWidth"] = "20";
            //Chart1.Series["Default"]["MaxPixelPointWidth"] = "80";
            //设置柱形的宽度--相对
            //Chart1.Series["Default"]["PointWidth"] = "0.5";
            //在Series上显示标签
            Chart1.Series["Default"].ShowLabelAsValue = true;
            //自定义图片
            //Chart1.Series["Default"].MarkerImage = @"http://pic4.nipic.com/20091201/1496589_125444082374_2.jpg";

            //折线图，对每个数据点画一个小圆点
            for (int i = 0; i < Chart1.Series["Default"].Points.Count; i++)
            {
                //设置折点的风格
                Chart1.Series["Default"].Points[i].MarkerStyle = MarkerStyle.Circle;
                //设置seires中折点的颜色 
                Chart1.Series["Default"].Points[i].MarkerColor = Color.Red;
            }

            #endregion

            #region 设置图例

            //设置相应的图例
            //Chart1.Legends.Add("Default");
            Chart1.Legends[0].Enabled = true; //设置Legends为可见
            //设置居中
            Chart1.Legends[0].Alignment = StringAlignment.Center;
            //设置Legends的位置在底部
            Chart1.Legends[0].Docking = LegendDocking.Bottom;
            //自动适应名称的长度，不然会出现..的情况
            Chart1.Legends[0].AutoFitText = true;
            Chart1.Legends[0].Title = "温度";

            #endregion

            #region 设置报表区域

            //设置X轴
            Chart1.ChartAreas["Default"].AxisX.Title = "日期";
            Chart1.ChartAreas["Default"].AxisX.TitleAlignment = StringAlignment.Far;//设置X轴标题的名称所在位置位远 
            Chart1.ChartAreas["Default"].AxisX.Interval = 1;//设置X轴显示间隔为1 ，对于X轴数据比较多的时候比较有用 
            Chart1.ChartAreas["Default"].AxisX.Arrows = ArrowsType.Lines;//设置X轴前面加箭头 
            //设置X轴标签的倾斜度，值为-90到90之间
            Chart1.ChartAreas["Default"].AxisX.LabelStyle.FontAngle = -45;
            //设置X轴网格线样式
            Chart1.ChartAreas["Default"].AxisX.MajorGrid.LineColor = Color.Red;
            //设置X轴轴线样式
            //Chart1.ChartAreas["Default"].AxisX.LineStyle = ChartDashStyle.DashDotDot;
            //Chart1.ChartAreas["Default"].AxisX.LineColor = Color.YellowGreen;
            //去掉坐标轴前的短横线
            Chart1.ChartAreas["Default"].AxisX.MajorTickMark.Enabled = false;

            //设置Y轴 
            Chart1.ChartAreas["Default"].AxisY.Title = "°C";
            Chart1.ChartAreas["Default"].AxisY.TitleAlignment = StringAlignment.Center;//设置Y轴标题的名称所在位置位远 
            Chart1.ChartAreas["Default"].AxisY.Arrows = ArrowsType.SharpTriangle;//设置Y轴前面加粗箭头
            Chart1.ChartAreas["Default"].AxisY.Interval = 30;
            Chart1.ChartAreas["Default"].AxisY.LabelStyle.FontAngle = 45;
            //设置Y轴网格线样式
            Chart1.ChartAreas["Default"].AxisY.MajorGrid.LineColor = Color.Blue;
            Chart1.ChartAreas["Default"].AxisY.MajorGrid.Enabled = false;

            //设置3D的样式
            //Chart1.ChartAreas["Default"].Area3DStyle.Enable3D = true;

            //设置分隔线
            StripLine stL = GetStripLine("平均值", 34, 1);
            Chart1.ChartAreas["Default"].AxisY.StripLines.Add(stL);

            #endregion

            //保存生成的图片
            //Chart1.Save("D:\\Image\\001.jpg");
        }

        /// <summary>
        /// 数据绑定
        /// </summary>
        private new void DataBind()
        {
            string[] xValues = new string[7] { "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日" };
            double[] yValues = new double[7] { 39, 36, 37, 31, 35, 32, 37 };

            Chart1.Series["Default"].Points.DataBindXY(xValues, yValues);
        }

        /// <summary>
        /// 分隔线
        /// </summary>
        /// <param name="title">分隔线标题</param>
        /// <param name="dOffsetVal">分隔线的轴值</param>
        /// <param name="dWidth">分隔线宽度</param>
        /// <returns></returns>
        private StripLine GetStripLine(string title, double dOffsetVal, double dWidth)
        {
            StripLine sl = new StripLine();
            sl.TitleAlignment = System.Drawing.StringAlignment.Near;
            sl.TitleFont = new Font("Times New Format", 8f);
            //分隔线的宽度
            sl.StripWidth = dWidth;
            //分隔线的标题
            sl.Title = title;
            //分隔线的颜色
            sl.BackColor = Color.LightGreen;
            //分隔线的轴值
            sl.IntervalOffset = dOffsetVal;
            sl.TitleAngle = 90;
            return sl;
        }

        #endregion
    }
}

（3）效果图