Echarts+WPF

本文介绍了一个使用WPF与HTML进行双向交互的应用案例,包括如何通过WPF调用HTML中的JavaScript函数,以及如何从HTML向WPF传递数据。文中详细展示了如何设置WPF与HTML的交互环境,并提供了一个具体的例子来说明这一过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

C#

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Interop;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;

namespace WpfBrowserApp1
{
    /// <summary>
    /// Page1.xaml 的交互逻辑
    /// </summary>
    public partial class Page1 : Page
    {
        public dynamic scriptObject = null;
        public Page1()
        {
            InitializeComponent();
            if (!BrowserInteropHelper.IsBrowserHosted)
            {
                MessageBox.Show("不满足与JS调用条件");
                return;
            }
            scriptObject = BrowserInteropHelper.HostScript;
            if (scriptObject != null)
            {
                scriptObject.SetWpfObj(new OprateBasic());
            }
            webbrowser.Source = new Uri("html页面的路径");
            webbrowser.ObjectForScripting = new OprateBasic();
//            m_webFrame.Source =
//                new Uri(
//                    "");
//            m_webFrame.NavigationUIVisibility = System.Windows.Navigation.NavigationUIVisibility.Hidden;
            // Web.Navigate();
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            //O option = JsonConvert.DeserializeObject<O>(Readjson(""));
            webbrowser.InvokeScript("msg",Readjson(""));
            //Web.InvokeScript("msg", Tb1.Text);
        }
        /// <summary>
        /// 读取JSON文件
        /// </summary>
        /// <param name="key">JSON文件中的key值</param>
        /// <returns>JSON文件中的value值</returns>
        public static string Readjson(string key)
        {
            string jsonfile = "";//JSON文件路径

            using (System.IO.StreamReader file = System.IO.File.OpenText(jsonfile))
            {
                using (JsonTextReader reader = new JsonTextReader(file))
                {
                    JObject o = (JObject)JToken.ReadFrom(reader);
                    var value = o.ToString();
                    return value;
                }
            }
        }
    }
    [System.Runtime.InteropServices.ComVisible(true)] // 将该类设置为com可访问
    public class OprateBasic
    {
        public void palymusic(string msg)
        {
            //string json = File.ReadAllText("json文件路径“);
            //dynamic jsonObj = Newtonsoft.Json.JsonConvert.DeserializeObject(json);
            
           // string output = JsonConvert.SerializeObject(msg, Newtonsoft.Json.Formatting.Indented);
            File.WriteAllText("data.json", msg);
           // MessageBox.Show("WPF弹出框:" + msg);
        }
    }
}

html 

 1 <!-- saved from url=(0013)about:internet -->
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5     <meta charset="utf-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 7     <title>ECharts</title>
 8     
 9     <!-- 引入 echarts.js -->
10     <script src="../Scripts/echarts.js"></script>
11     <script src="../Scripts/echarts-all.js"></script>
12     <script src="http://code.jquery.com/jquery-latest.js"></script>
13 </head>
14 <body>
15     <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
16 <div id="main" style="width: 600px;height:400px;"></div>
17 <input type="text" id="txtInput" />
18 <button onclick="Test()" style="width:100px;height:20px">测试</button>
19 <script>
20     var con = window.external
21     var option = {};
22     function Test() {
23         option.xAxis[0].name = $("#txtInput").val()
24         con.palymusic(JSON.stringify(option));
25     }
26     
27     function msg(obj) {
28         alert(obj)
29         var myChart = echarts.init(document.getElementById('main'));
30         option = JSON.parse(obj)
31         myChart.setOption(option)
32     }
33     
34 </script>
35     <script type="text/javascript">
36         // 基于准备好的dom,初始化echarts实例
37         
38 
39         // 指定图表的配置项和数据
40         
41         //var str = ""
42        // $.getJSON("../Data/data.json",function(data){
43          //   $.each(data,function(infoindex,info){
44                 //str+=info["dd"]
45            // })
46         //})
47        // alert(str);
48         //;
49         
50     </script>
51 </body>
52 </html>
View Code
配置
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <asmv1:assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1" xmlns:asmv1="urn:schemas-microsoft-com:asm.v1" xmlns:asmv2="urn:schemas-microsoft-com:asm.v2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
 3   <assemblyIdentity version="1.0.0.0" name="MyApplication.app" />
 4   <trustInfo xmlns="urn:schemas-microsoft-com:asm.v2">
 5     <security>
 6       <requestedPrivileges xmlns="urn:schemas-microsoft-com:asm.v3">
 7         <!-- UAC 清单选项
 8             如果要更改 Windows 用户帐户控制级别,请用以下节点之一替换 
 9             requestedExecutionLevel 节点。
10 
11         <requestedExecutionLevel  level="asInvoker" uiAccess="false" />
12         <requestedExecutionLevel  level="requireAdministrator" uiAccess="false" />
13         <requestedExecutionLevel  level="highestAvailable" uiAccess="false" />
14 
15             指定 requestedExecutionLevel 节点将会禁用文件和注册表虚拟化。
16             如果要利用文件和注册表虚拟化实现向后 
17             兼容性,则删除 requestedExecutionLevel 节点。
18         -->
19         <requestedExecutionLevel level="asInvoker" uiAccess="false" />
20       </requestedPrivileges>
21       <applicationRequestMinimum>
22         <defaultAssemblyRequest permissionSetReference="Custom" />
23         <PermissionSet class="System.Security.PermissionSet" version="1" Unrestricted="true" ID="Custom" SameSite="site" />
24       </applicationRequestMinimum>
25     </security>
26   </trustInfo>
27   <compatibility xmlns="urn:schemas-microsoft-com:compatibility.v1">
28     <application>
29       <!-- 此应用程序设计使用的所有 Windows 版本的列表。Windows 将会自动选择最兼容的环境。-->
30       <!-- 如果应用程序设计使用 Windows 7,请取消注释以下 supportedOS 节点-->
31       <!--<supportedOS Id="{35138b9a-5d96-4fbd-8e2d-a2440225f93a}"/>-->
32     </application>
33   </compatibility>
34   <!-- 启用 Windows 公共控件和对话框的主题(Windows XP 和更高版本) -->
35   <!-- <dependency>
36     <dependentAssembly>
37       <assemblyIdentity
38           type="win32"
39           name="Microsoft.Windows.Common-Controls"
40           version="6.0.0.0"
41           processorArchitecture="*"
42           publicKeyToken="6595b64144ccf1df"
43           language="*"
44         />
45     </dependentAssembly>
46   </dependency>-->
47 </asmv1:assembly>
View Code

 

转载于:https://www.cnblogs.com/hegezhishouzhetian/p/10659333.html

之前三此发的库http://download.youkuaiyun.com/detail/maiker/9621027可以作废,本次为最新的,其中测试了历史曲线的动态显示,这是对Microsoft WpfToolkit的更新和扩展: 1、将库版本升级到.NET 4.6.1,对命名控件进行了替换处理 2、实现了单数据Chart图的混合颜色显示,可通过修改资源字典调整和添加颜色 3、可控制各种Chart图形的数据值显示 4、坐标轴文本可倾斜显示 5、添加了StepLine图和圆环图,圆环半径比例系数可设定,同时添加了饼图的半径比系数,这样可以更好的控制饼图的标签显示,避免重叠 6、Legend可位于区域四侧,对齐方式也可以设定,以及是否显示, 可控制Chart Title是否显示 7、柱状图缝隙间隔可调整 8、全方面的加入了各种加载动画效果,动画效果可屏蔽,同时原系统自带动画效果,可叠加,这是两种不同的效果,可以互补性的单个使用 9、设计了四种主题颜色,各人可以针对图形颜色和背景色进行更好的搭配,在用户项目中,可以自己添加新的主题。 10、扩展了时间轴的应用,在新的DateTimeChart中可以通过鼠标平移和缩放时间轴,并测试了两个例子用于动态显示历史曲线,一个是外部定时更新,一个是内部定时更新 11、对LineDataPoint样式进行了设计,现在可以选择线图的点样式(如空心圆、五角星、三角形,矩形等),同时这些不同的点样式可以体现在Legend上,从而实现颜色和图形的双重区分。 总而言之,微软的控件库做得很标准,还是很好修改的。 最后一直想在历史曲线中取消点动画(及默认的透明度动画),以便提高执行效率,但微软的那部分动画不熟,总是修改失败。 可以发邮件wuyang26@live.cn讨论。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值