使用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);

}

}

}