使用Silverlight编写自定的绘图表组件（处女贴）

注册 快6年了，第一次写博客。呵呵，希望大家不要见笑，以后我将陆续写博客，形成习惯将自己的经验与大家分享。

 

 

使用Silverlight编写自定的绘图组件，我们都知道使用Silverlight调用第三方组件绘制漂亮的图表组件，但有时个性化开发还是不能得到满足，实际工作中我们常常使用图表来直观表示各种数据。好废话不多说,先看看绘制的效果(高手可以路过)

 

 

 

调用步聚:

1.导入js包

    <script type="text/javascript" src="js/chart.js"></script>

 

 

    //重写该方法即可被调用执行绘图     function silverlightChart() {

        //SLChart(id,width,height)         var chart = new SLChart('slchart', 800, 450);         var caption = 'test';         chart.SetCaption(caption);

        //axis(type,color,chartsize,axisTitle,unitText)         chart.AddAxis('column', '#3366CC', '19', '', '(件)', 'Plan Count');         chart.AddAxis('column', '#DC3912', '19', '', '', 'Finish Count');         //Set SL Value         chart.SetValue('一月,22,22|二月,44,44|三月,74,44|四月,94,44|五月,64,40');         //execute draw Graph         chart.DrawGraph();     }

 

即可实现以上效果

 

由于是公司的项目，源代码下载我将整理后发布

 

 

using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Browser; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using FTI.SLChart.Datas;

namespace FTI.SLChart {     public partial class MainPage : UserControl     {         //记录是否已绘制标签         private bool m_isDrawLabel = false;

        public MainPage()         {             InitializeComponent();

            //Reg javascript             HtmlPage.RegisterScriptableObject("JsCall", this);

            this.Loaded += new RoutedEventHandler(MainPage_Loaded);         }

        /// <summary>         ///         /// </summary>         /// <param name="sender"></param>         /// <param name="e"></param>         void MainPage_Loaded(object sender, RoutedEventArgs e)         {             //调用开始画图DrawGraph             ScriptObject script = HtmlPage.Window.GetProperty("silverlightChart") as ScriptObject;             if (script != null)             {                 script.InvokeSelf(null);             }         }

        /// <summary>         /// 初始化绘图区         /// </summary>         /// <param name="w"></param>         /// <param name="h"></param>         [ScriptableMember]         public void Init(double w, double h)         {             //设置绘图区域大小             BaseData.AreaGraphWeight = w - 100;             BaseData.AreaGraphHeight = h - 100;         }

        /// <summary>         /// 设置标题         /// </summary>         /// <param name="caption"></param>         [ScriptableMember]         public void SetCaption(string caption)         {             BaseData.MainCaption = caption;         }

        /// <summary>         /// 增加轴信息         /// </summary>         /// <param name="val"></param>         [ScriptableMember]         public void AddAxis(string type, string color, string chartSize, string axisCaption, string unitTxt, string thumbnailCaption)         //public void AddAxis(string type, string color, string chartSize, string axisCaption, string unitTxt)         {             //default is column             var drawType = Enums.DrawType.Column;             if (GraphData.AxisModels == null)             {                 GraphData.AxisModels = new List<FTI.SLChart.Model.AxisModel>();             }

            switch (type.ToLower())             {                 case "line":                     drawType = Enums.DrawType.Curve;                     break;                 case "column":                     drawType = Enums.DrawType.Column;                     break;                 default:                     break;             }

            //轴信息             var axis = new Model.AxisModel(Common.DataConvert.StringToColor(color), Common.DataConvert.StringToDouble(chartSize),                 drawType, Enums.DrawAxisPosition.LeftAxis, axisCaption, unitTxt, thumbnailCaption, !m_isDrawLabel);

            //添加到轴信息中             GraphData.AxisModels.Add(axis);

            //已绘制标题             if (!m_isDrawLabel)             {                 m_isDrawLabel = true;             }         }

        /// <summary>         /// 设置对象参数         /// </summary>         /// <param name="val"></param>         [ScriptableMember]         public void SetValue(string vals)         {             if (string.IsNullOrEmpty(vals))             {                 return;             }

            var val = vals.Split(',');             var data = new Model.DataModel()             {                 ItemLabel = val[0],                 ItemValues = new List<double>()             };

            //检查是否空值             if (GraphData.ChartDatas == null)             {                 GraphData.ChartDatas = new List<FTI.SLChart.Model.DataModel>();             }

            //添加到图表中             data.ItemValues.Add(double.Parse(val[1]));             data.ItemValues.Add(double.Parse(val[2]));             GraphData.ChartDatas.Add(data);         }

        /// <summary>         /// 执行绘制图形         /// </summary>         [ScriptableMember]         public void DrawGraph()         {             //window.document.body.offsetWidth             var obj = HtmlPage.Document.Body.GetAttribute("clientWidth");

            //添加绘图区标题             GraphtTitle.Text = BaseData.MainCaption;

            //添加主绘图区             var graph = new Views.AreaGraph();             if (obj != null)             {                 var left = Convert.ToDouble(obj) / 2 - BaseData.AreaGraphWeight / 2;                 graph.SetValue(Canvas.LeftProperty, left);             }             this.Main.Children.Add(graph);

            //添加缩略图             var thumbnail = new Views.AreaThumbnail();

            if (obj != null)             {                 var left = Convert.ToDouble(obj) / 2 + BaseData.AreaGraphWeight / 2;                 thumbnail.SetValue(Canvas.LeftProperty, left + +20);             }             this.Thumbnail.Children.Add(thumbnail);         }     } }