Silverlight结合html实现的 图表效果

<Canvas x:Class="TgSilverlight.scene"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="480" d:DesignWidth="640">

<Canvas.Resources>
<!--如果是动态创建故事集  该段代码可不要<Storyboard x:Name="BarRedrow">
<DoubleAnimation x:Name="BarRedrawDoubleAnimation"
Storyboard.TargetName="Bar1"
Storyboard.TargetProperty="Width"
From="0" To="300" Duration="0:0:1" />

</Storyboard>-->
</Canvas.Resources>
<Canvas.Background>
<LinearGradientBrush EndPoint="1.068,1.077" StartPoint="0.256,0.299">
<GradientStop Color="#ffffffff" Offset="0" />
<GradientStop Color="#fff2ff00" Offset="1" />
</LinearGradientBrush>
</Canvas.Background>
<Path Width="1" Height="400" Fill="#ffffffff" Stretch="Fill"
Stroke="#ff000000" Canvas.Left="55" Canvas.Top="29.5"
Data="M 50,50 50,400z"/>
<Path Width="511" Height="1" Fill="#ffffffff" Stretch="Fill"
Stroke="#ff000000" Canvas.Top="431.5" Canvas.Left="59.5"
Data="M 50,400 450,400z" />
<TextBlock Width="31.334" Height="30.667" Canvas.Left="25.499"
Canvas.Top="60" TextWrapping="Wrap" >
<Run Text="Q1" />
</TextBlock>
<TextBlock Width="31.334" Height="30.667" Canvas.Left="25.499"
Canvas.Top="160" TextWrapping="Wrap" >
<Run Text="Q2" />
</TextBlock>
<TextBlock Width="31.334" Height="30.667" Canvas.Left="25.499"
Canvas.Top="260" TextWrapping="Wrap" >
<Run Text="Q3" />
</TextBlock>
<TextBlock Width="31.334" Height="30.667" Canvas.Left="25.499"
Canvas.Top="360" TextWrapping="Wrap" >
<Run Text="Q4" />
</TextBlock>
<TextBlock Width="31.334" Height="30.667" Canvas.Left="42.999"
Canvas.Top="431.5" TextWrapping="Wrap" >
<Run Text="0" />
</TextBlock>
<TextBlock Width="31.334" Height="30.667" Canvas.Left="100"
Canvas.Top="433.5" TextWrapping="Wrap" >
<Run Text="100" />
</TextBlock>
<TextBlock Width="31.334" Height="30.667" Canvas.Left="160"
Canvas.Top="433.5" TextWrapping="Wrap" Text="200" />
<TextBlock Width="31.334" Height="30.667" Canvas.Left="220"
Canvas.Top="433.5" TextWrapping="Wrap" Text="300" />
<TextBlock Width="31.334" Height="30.667" Canvas.Left="280"
Canvas.Top="433.5" TextWrapping="Wrap" Text="400" />
<TextBlock Width="31.334" Height="30.667" Canvas.Left="340"
Canvas.Top="433.5" TextWrapping="Wrap" Text="500" />
<TextBlock Width="31.334" Height="30.667" Canvas.Left="400"
Canvas.Top="433.5" TextWrapping="Wrap" Text="600" />
<TextBlock Width="31.334" Height="30.667" Canvas.Left="460"
Canvas.Top="433.5" TextWrapping="Wrap" Text="700" />
<TextBlock Width="31.334" Height="30.667" Canvas.Left="520"
Canvas.Top="433.5" TextWrapping="Wrap" Text="800" />
<Rectangle x:Name="Bar1" Width="340" Height="40" Stroke="#ff979797"
Canvas.Left="55.5" RenderTransformOrigin="0.5,0.5">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.1,0.001">
<GradientStop Color="#fffffdfd" Offset="0" />
<GradientStop Color="#ff00ff11" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.RenderTransform>
<TransformGroup>
<!--缩放变形 其值表示缩放的比例-->
<ScaleTransform ScaleX="-1" ScaleY="1" />
<!--产生基于 X Y的偏移三维效果-->
<SkewTransform AngleX="0" AngleY="0"/>
<!--旋转变形Angle表示旋转的角度-->
<RotateTransform Angle="0" />
<!--平移变形-->
<TranslateTransform X="0" Y="50" />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="Bar2" Width="340" Height="40" Stroke="#ff979797"
Canvas.Left="55.5" RenderTransformOrigin="0.5,0.5">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.1,0.001">
<GradientStop Color="#fffffdfd" Offset="0" />
<GradientStop Color="#ff00ff11" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1" ScaleY="1" />
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0" />
<TranslateTransform X="0" Y="150" />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="Bar3" Width="340" Height="40" Stroke="#ff979797"
Canvas.Left="55.5" RenderTransformOrigin="0.5,0.5">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.1,0.001">
<GradientStop Color="#fffffdfd" Offset="0" />
<GradientStop Color="#ff00ff11" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1" ScaleY="1" />
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0" />
<TranslateTransform X="0" Y="250" />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="Bar4" Width="340" Height="40" Stroke="#ff979797"
Canvas.Left="55.5" RenderTransformOrigin="0.5,0.5">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.1,0.001">
<GradientStop Color="#fffffdfd" Offset="0" />
<GradientStop Color="#ff00ff11" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1" ScaleY="1" />
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0" />
<TranslateTransform X="0" Y="350" />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
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 System.Windows.Browser;
using System.Windows.Markup;

namespace TgSilverlight
{
public partial class scene : Canvas
{
public scene()
{
InitializeComponent();
//获取页面的button对象
HtmlElement button = HtmlPage.Document.GetElementById("btnShow");
//注册button的click事件
button.AttachEvent("onclick",new EventHandler<HtmlEventArgs>(button_onClick));
HtmlPage.RegisterScriptableObject("Builder",this);
}
public void button_onClick(object sender, HtmlEventArgs e)
{
HtmlElement txtYear = HtmlPage.Document.GetElementById("txtYear");
string value = txtYear.GetAttribute("value");
if (value.Equals("2006"))
{
ShowAnima(date2006);
}
else
{
ShowAnima(date2007);
}
}
int[] date2006 = { 100, 200, 300, 400 };   //四个矩形宽度值
int[] date2007 = { 200, 100, 250, 200 };
[ScriptableMember]
public void JsShowAnima(string a, int i)  //调用后有小bug   前三个矩形宽度不能保存(待解决)
{
BarRedrow.Stop();
int[] val = a == "2006" ? date2006 : date2007;
BarRedrawDoubleAnimation.From = 0;
BarRedrawDoubleAnimation.SetValue(Storyboard.TargetNameProperty, "Bar" + i.ToString());
BarRedrawDoubleAnimation.SetValue(Storyboard.DurationProperty, new Duration(new TimeSpan(0, 0, 2)));
BarRedrawDoubleAnimation.To = val[i - 1];
BarRedrow.Begin();
}
public void ShowAnima(int [] val)
{
for (int k = 1; k <= 4; k++)
{
this.Resources.Remove("story" + k.ToString());
}
for (int i = 1; i <= 4; i++)
{
Storyboard story = new Storyboard();    //创建4个Storyboard故事集用于显示4个Rectangle动画
DoubleAnimation anima = new DoubleAnimation();
anima.From = 0;
anima.SetValue(Storyboard.TargetNameProperty, "Bar" + i.ToString());
anima.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("Width"));
anima.SetValue(Storyboard.DurationProperty, new Duration(new TimeSpan(0, 0, i)));
anima.To = val[i - 1];
story.Children.Add(anima);
this.Resources.Add("story" + i.ToString(), story);
story.Begin();
}
}
}
}

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>TgSilverlight</title>
<mce:style type="text/css"><!--
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
}

--></mce:style><style type="text/css" mce_bogus="1">    html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
}
</style>
<mce:script type="text/javascript" src="Silverlight.js" mce_src="Silverlight.js"></mce:script>
<mce:script type="text/javascript"><!--
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}

var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;

if (errorType == "ImageError" || errorType == "MediaError") {
return;
}

var errMsg = "Silverlight 应用程序中未处理的错误 " +  appSource + "/n" ;

errMsg += "代码: "+ iErrorCode + "    /n";
errMsg += "类别: " + errorType + "       /n";
errMsg += "消息: " + args.ErrorMessage + "     /n";

if (errorType == "ParserError") {
errMsg += "文件: " + args.xamlFile + "     /n";
errMsg += "行: " + args.lineNumber + "     /n";
errMsg += "位置: " + args.charPosition + "     /n";
}
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "行: " + args.lineNumber + "     /n";
errMsg += "位置: " +  args.charPosition + "     /n";
}
errMsg += "方法名称: " + args.methodName + "     /n";
}

引发新错误(errMsg);
}

// --></mce:script>
<mce:script type="text/javascript"><!--
function ShowSilverlight() {
var i = 1;
var xamlObj = document.all("xamlObj");
setTimeout(function () { xamlObj.content.Builder.JsShowAnima(document.getElementById("txtYear").value, i++); }, 0);
setTimeout(function () { xamlObj.content.Builder.JsShowAnima(document.getElementById("txtYear").value, i++); }, 2000);
setTimeout(function () { xamlObj.content.Builder.JsShowAnima(document.getElementById("txtYear").value, i++); }, 4000);
setTimeout(function () { xamlObj.content.Builder.JsShowAnima(document.getElementById("txtYear").value, i++); }, 6000);
}

// --></mce:script>
</head>
<body>
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost" style="width:640px;height:480px;">
<object id="xamlObj" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/TgSilverlight.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" mce_href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none" mce_style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" mce_src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="获取 Microsoft Silverlight" style="border-style:none" mce_style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
<br />
请输入年份:<input type="text" id="txtYear" />
<input id="btnShow" type="button"
value="通过Silverlight调用" style="width:140px;" />
<input onclick="ShowSilverlight()" type="button"
value="通过JS调用Silverlight函数" style="width:180px;" />
</form>
</body>
</html>