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

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

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

<!DOCTYPE html>

<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">

<!-- saved from url=(0013)about:internet -->

<head>

    <meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=5,6,7,8,9,10,11, chrome=1" />

    <title>ECharts</title>

</head>

<body>

    <h1>html页面</h1>

    <button Onclick="click1()" style="width:100px;height:20px">测试</button>

    <script>

        function click1()

        {

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

        }

    </script>

    <div id="main" style="width:1000px;height:500px;margin-left:-8px" />

    <script src="echats.js"></script>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script>

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

    </script>

    <script>

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

        }

    </script>

</body>

</html>

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

<Window x:Class="EachartsDemo.MainWindow"

        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">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="50"></RowDefinition>

            <RowDefinition></RowDefinition>

            <RowDefinition Height="100"></RowDefinition>

        </Grid.RowDefinitions>

        <TextBlock Grid.Row="0" Text="webBrowser" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25"></TextBlock>

        <WebBrowser Grid.Row="1" Name="Web"></WebBrowser>

        <StackPanel Grid.Row="2" Orientation="Horizontal" VerticalAlignment="Center">

            <TextBlock Text="wpf按钮: " FontSize="20"></TextBlock>

            <Button Grid.Row="2" Name="btnShowHide" Content="加载"  Click="btnShowHide_Click"></Button>

            <Button Grid.Row="2" Name="btnAddSeries" Content="追加" Margin="10,0,0,0" Click="btnPushData_Click"></Button>

            <Button Grid.Row="2" Name="btnSet" Content="重置" Margin="10,0,0,0" Click="SetOption">

            </Button>

        </StackPanel>

    </Grid>

</Window>

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

private void Window_Loaded(object sender, RoutedEventArgs e)

        {

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

        }

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

int show = ;

        private void btnShowHide_Click(object sender, RoutedEventArgs e)

        {

            Web.InvokeScript("jsShowHide", show);

            if (show == ) show = ;

            else show = ;

        }

        private void btnPushData_Click(object sender, RoutedEventArgs e)

        {

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

        }

        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"));

        }

　　就这样~我们测试一下~

在WPF中嵌入WebBrowser可视化页面的更多相关文章

  1. WPF中嵌入WinForm中的webbrowser控件

    原文:WPF中嵌入WinForm中的webbrowser控件 使用VS2008创建WPF应用程序,需使用webbrowser.从工具箱中添加WPF组件中的webbrowser发现其中有很多属性事件不能 ...

  2. 浏览器扩展系列————在WPF中定制WebBrowser快捷菜单

    原文:浏览器扩展系列----在WPF中定制WebBrowser快捷菜单 关于如何定制菜单可以参考codeproject上的这篇文章:http://www.codeproject.com/KB/book ...

  3. WPF中嵌入普通Win32程序的方法

    公司现在在研发基于.Net中WPF技术的产品,由于要兼容旧有产品,比如一些旧有的Win32程序.第三方的Win32程序等等,还要实现自动登录这些外部Win32程序,因此必须能够将这些程序整合到我们的系 ...

  4. WPF中嵌入Office编辑器（支持Word、Excel、PPT、Visio等）

    现在有一个项目,需要使用wpf做一个简单的客户端,用来生成word.excel.ppt.visio等文档,这就需要能够在wpf中嵌入office的编辑器,并对office文档进行编辑. 在网上搜索了一 ...

  5. WinForm中嵌入WebBrowser,并且支持C#和JS方法的相互调用

    纯粹WinForm界面不够友好,实现数据复杂度高的处理有些力不从心,所以看了看api以后决定用html来做. 我的wlw的代码插件不是很好用,大家凑合看吧 类前说明引用和权限 1: [Permissi ...

  6. 提供PPT嵌入Winform/WPF解决方案，Winform/WPF 中嵌入 office ppt 解决方案

    Winform/WPF 中嵌入 office ppt(powerpoint)解决方案示: 1. 在winform中操作ppt,翻页.播放.退出:显示 总页数.当前播放页数 2. 启动播放ppt时录制视 ...

  7. 把演讲人的桌面、头像、声音合成后推送到 指定的直播流平台上； 录制电脑桌面、摄像头头像、声音保存为本地视频； 适用于讲课老师、医生等演讲内容保存为视频； 提供PPT嵌入Winform/WPF解决方案，Winform/WPF 中嵌入 office ppt 解决方案

    提供PPT嵌入Winform/WPF解决方案,Winform/WPF 中嵌入 office ppt 解决方案 Winform/WPF 中嵌入 office ppt(powerpoint)解决方案示: ...

  8. WPF中禁止WebBrowser控件打开新窗口

    一.针对纯WPF的WebBrowser控件: <summary> Suppress Script Errors In WPF WebBrowser </summary> pub ...

  9. WPF中嵌入Skyline提供的COM组件填坑

    网上有很多关于在WPF中使用的Skyline提供的COM组件的教程,但大都雷同一律,其中很多的细节均为涉及,本文意在在其原基础上进行一些细节的补充. 工具:Visual Studio 2017 1.  ...

随机推荐

  1. mail.inc实现周密的留言发邮箱

    我网站上很多地方都有给我留言的链接,这些链接指向一个地方 http://www.dushangself.site/emlog/?post=8 (源码使用方式:一共四个源代码,第一个和第二个写在一起,, ...

  2. [apue] 使用 poll 检测管道断开

    一般使用 poll 检测 socket 或标准输入时,只要指定 POLLIN 标志位,就可以检测是否有数据到达,或者连接断开: ]; fds[].fd = STDIN_FILENO; fds[].ev ...

  3. leadcode的Hot100系列--617. 合并二叉树

    合并,就是两个树的结构交集部分,数据相加,否则,取非空部分. 所以,这里相当于是对两棵树同时遍历: 如果两棵树节点都不为空,则数据相加, 否则,直接指针把不为空的节点复制过来. 注:这里没有申请内存, ...

  4. 我把代码开源、托管到了GitHub、码云

    前言 学习了那么多知识点,写了那么多代码,一直都没有时间整理,之前都是新学一个知识点就在同一个工程项目中进行实践测试,导致这个工程越来越臃肿.越来越乱,连我自己都快看不懂了... 这段时间整理了部分代 ...

  5. EditPlus VC2010 and 2008 C/C++配置

    源自:http://blog.csdn.net/weiling_shen/archive/2010/03/26/5421017.aspx 对于2010跟2008差不多,只需相应的修改一下路径即可:如2 ...

  6. 玲珑OJ 1083：XJT Love Digits（离线处理+哈希）

    http://www.ifrog.cc/acm/problem/1083 题意:比较好懂.注意答案的x不包含ax本身,所以才输出-1. 思路:离线处理.根据x排序,然后每次更新Hash[]数组就好了. ...

  7. LinkedList源码分析：JDK源码分析系列

    如果本文中有不正确的地方请指出由于没有留言可以在公众号添加我的好友共同讨论. 1.介绍 LinkedList 是线程不安全的,允许元素为null的双向链表. 2.继承结构 我们来看一下LinkedLi ...

  8. C++一些知识的整理

    1. C 和 C++ 区别 C++支持多种编程范式:面向对象编程.泛型编程.过程化编程.支持类.封装.重载等特性. c和c++的头文件不同. 输入输出不同. 变量的声明定义不同:c语言:变量要放在语句 ...

  9. Java学习笔记之---单例模型

    Java学习笔记之---单例模型 单例模型分为:饿汉式,懒汉式 (一)要点 1.某个类只能有一个实例 2.必须自行创建实例 3.必须自行向整个系统提供这个实例 (二)实现 1.只提供私有的构造方法 2 ...

  10. 数据结构丨N叉树

    遍历 N叉树的遍历 树的遍历 一棵二叉树可以按照前序.中序.后序或者层序来进行遍历.在这些遍历方法中,前序遍历.后序遍历和层序遍历同样可以运用到N叉树中. 回顾 - 二叉树的遍历 前序遍历 - 首先访 ...