html特效 wpf,在WPF中嵌入WebBrowser可视化页面

无论是哪种C/S技术，涉及数据可视化就非常的累赘了，当然大神也一定有，只不过面向大多数人，还是通过网页来实现，有的时候不想把这两个功能分开，一般会是客户的原因，所以我们打算在WPF中嵌入WebBrowser，然后使用ECharts 完成复杂的图表展示，其功能不亚于一个名为Devexpress的图标库，而且这东西还收费(呵呵)，本文就对WebBrowser+ECharts进行了演示。

首先下载一下Echats.js文件以及Jquery文件并且创建一个Html页面，在我们项目的bin文件夹中。

在html中编辑，其中包括了几个方法，是对C#代码进行访问的。

ECharts

html页面

测试

function click1()

{

window.external.ShowMsg("这是一条信息");

}

myChart = echarts.init(document.getElementById('main'));

option = {

xAxis: {

type: 'category',

data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

},

yAxis: {

type: 'value'

},

series: [{

data: [820, 932, 901, 934, 1290, 1330, 1320],

type: 'line'

}]

};

myChart.setOption(option);

function SetOption(value) {

var dataObj = JSON.parse(value);//将字符串转换为json对象

myChart.setOption(JSON.parse(dataObj));//将json对象转换为[Object]

}

function jsShowHide(info) {

if (info == 0) {

myChart.clear();

}

else {

myChart.setOption(option);

}

}

function jsPushData(x, y) {

option.xAxis.data.push(x);

option.series[0].data.push(y);

myChart.setOption(option);

}

现在我们需要编辑一下我们的WPF窗体，在其中放入我们的浏览器，然后让它显示我们刚刚写好的页面。

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"

xmlns:local="clr-namespace:EachartsDemo"

mc:Ignorable="d"

Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">

在Windows标记中我们需要一个Load事件用于让WebBrowser跳转到相应的页面。

private void Window_Loaded(object sender, RoutedEventArgs e)

{

Web.Navigate(new Uri(Directory.GetCurrentDirectory() + "/Demo.html"));

}

最后我们还需要创建几个方法，用于让C#直接调用其中Js方法。

int show = 0;

private void btnShowHide_Click(object sender, RoutedEventArgs e)

{

Web.InvokeScript("jsShowHide", show);

if (show == 0) show = 1;

else show = 0;

}

private void btnPushData_Click(object sender, RoutedEventArgs e)

{

Web.InvokeScript("jsPushData", "x", 1000,"y","200");

}

private void SetOption(object sender, RoutedEventArgs e)

{

string strobj = @"{""xAxis"":{""type"":""category"",""data"":[""Mon"",""Tue"",""Wed"",""Thu"",""Fri"",""Sat"",""Sun""]},""yAxis"":{""type"":""value""},""series"":[{""data"":[100,200,300,400,500,600,700],""type"":""line""}]}";

var aa = JsonConvert.SerializeObject(strobj.Trim());

Web.InvokeScript("SetOption",aa);

}

因为我们在xaml中把WebBrowser的name改成了Web，其中这个控件自带一个InvokeScript方法，就是来使用页面写好的Function，就这样启动~

可见效果还可以，就现在我们要通过Js调用C#方法，首先编辑一个页面可操作的类，我们创建 EchatsHelper ,必须在类上面标注特性，否则程序启动不起来，因为WebBrowser是涉及一些安全性的东西，只要是在哪个类new出来，就必须在哪个类标注特性。

[PermissionSet(SecurityAction.Demand, Name = "FullTrust")]

[System.Runtime.InteropServices.ComVisible(true)]//给予权限并设置可见

public class EchatsHelper

{

WebBrowser web;

public EchatsHelper(WebBrowser web)

{

this.web = web;

}

public void ShowMsg(string Msg)

{

Console.WriteLine(Msg);

}

}

最后我们在Load事件中创建应用程序对文档文件的寄宿脚本访问。

private void Window_Loaded(object sender, RoutedEventArgs e)

{

Web.ObjectForScripting = new EchatsHelper(Web);

Web.Navigate(new Uri(Directory.GetCurrentDirectory() + "/Demo.html"));

}

就这样~我们测试一下~

作者：ZaraNet