乐时光博客园子

[reprinted:张子浩]

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

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

在WPF中嵌入WebBrowser可视化页面

在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 = 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,就这样启动~

在WPF中嵌入WebBrowser可视化页面

   可见效果还可以,就现在我们要通过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可视化页面

 

本文来源于互联网:在WPF中嵌入WebBrowser可视化页面  https://www.lesg.cn  本文中来自互联网如有侵权请联系删除。

上下篇:

相关推荐