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

注册CSDN 快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);
        }
    }
}