CefSharp 是一款开源的使用.net平台基于谷歌的 封装浏览器组件,可用于winform wpf 。
chart.js 也是一款开源的图表展示组件。
我所作的就是使用这两个组件再winform上实时显示动态曲线。
涉及到的知识主要是winform和js交互。
https://github.com/cefsharp/CefSharp/wiki/General-Usagee这里可以看见它的日常用法。
 private void frmMain_Load(object sender, EventArgs e)
{
WindowState = FormWindowState.Maximized;
var settings = new CefSettings();
settings.Locale = "zh-CN";
//settings.CefCommandLineArgs.Add("--disable-web-security", "1");//关闭同源策略,允许跨域
//settings.CefCommandLineArgs.Add("ppapi-flash-version", "18.0.0.209");//PepperFlash\manifest.json中的version
//settings.CefCommandLineArgs.Add("ppapi-flash-path", "PepperFlash\\pepflashplayer.dll");
//settings.CefCommandLineArgs.Add("--enable-system-flash", "1");//使用系统flash
/////允许浏览器地址栏使用文件地址
// settings.CefCommandLineArgs.Add("allow-access-from-files", "1");
// settings.CefCommandLineArgs.Add("allow-universal-access-from-files", "1");
settings.CefCommandLineArgs.Add("lang", "zh-CN");
Cef.Initialize(settings);
String page = string.Format(@"{0}\html\index.html", Application.StartupPath);
if (!File.Exists(page))
{
MessageBox.Show("Error The html file doesn't exists : " + page); }
//地址用中文的,中文转换。
page = dealUrl(page); textBox1.Text = page;
browser = new ChromiumWebBrowser(page);
BrowserSettings browserSettings = new BrowserSettings();
browserSettings.FileAccessFromFileUrls = CefState.Enabled;
browserSettings.UniversalAccessFromFileUrls = CefState.Enabled; browser.BrowserSettings = browserSettings; string txtHtml = string.Empty; toolStripContainer.ContentPanel.Controls.Add(browser);
browser.Dock = DockStyle.Fill; browser.KeyboardHandler = new CEFKeyBoardHander();
th = new Thread(SendData);
LstData = new List<int>(); //当浏览器解析对象的时候,去绑定js对象
browser.JavascriptObjectRepository.ResolveObject += (sender2, e2) =>
{
var repo = e2.ObjectRepository;
if (e2.ObjectName == "boundAsync")
{
BindingOptions bindingOptions = null; //Binding options is an optional param, defaults to null
bindingOptions = BindingOptions.DefaultBinder; //Use the default binder to serialize values into complex objects //bindingOptions = new BindingOptions { Binder = new MyCustomBinder() }); //Specify a custom binder
repo.NameConverter = null; //No CamelCase of Javascript Names
//For backwards compatability reasons the default NameConverter doesn't change the case of the objects returned from methods calls.
//https://github.com/cefsharp/CefSharp/issues/2442
//Use the new name converter to bound object method names and property names of returned objects converted to camelCase
//这里这样写之后,js端调用的方法首字母要小写。
repo.NameConverter = new CamelCaseJavascriptNameConverter();
repo.Register("boundAsync", new JsObject(LstData), isAsync: true, options: bindingOptions);
}
};
//js对象绑定完成回调
browser.JavascriptObjectRepository.ObjectBoundInJavascript += (sender3, e3) =>
{
var name = e3.ObjectName; Debug.WriteLine($"Object {e3.ObjectName} was bound successfully.");
};
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试实时曲线</title>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js" integrity="sha512-b3xr4frvDIeyC3gqR1/iOi6T+m3pLlQyXNuvn5FiRrrKiMUJK3du2QqZbCywH6JxS5EOfW0DY0M6WwdXFbCBLQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
<script src="chart.js"></script>
<style> </style>
</head>
<body style="margin-top:100px">
<h1><a href="https://www.cnblogs.com/HelloQLQ/">https://www.cnblogs.com/HelloQLQ/</a></h1>
<!-- 展示canvas -->
<div style="width: 800px;">
<canvas id="myChart" style="width:800px; height:400px;" ></canvas>
</div> <!--引入 chartjs-->
<script type="text/javascript">
// 设置参数
var d1 = [65, 59, 80, 81, 56, 55, 40];
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: d1
},
{
label: "My Second dataset",
backgroundColor: "rgb(151,187,205)",
borderColor: "rgb(151,187,205)",
pointBorderColor: "rgb(151,187,205)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgb(151,187,205)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
}; // Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
// options: options
}); (async function () {
await CefSharp.BindObjectAsync("boundAsync");
})(); //d1[0] = 85;
function Update() { boundAsync.sendData().then(function (str) { if (str != null) { var data1 = JSON.parse(str);
console.log(data1);
myLineChart.data.datasets[0].data = data1;
// Would update the first dataset's value of 'March' to be 50
myLineChart.update();
} }); // console.log(str); } </script>
</body>
</html>
整个工程下载:
使用到的组件使用nuget安装。工程里没包含。nuget搜索 cefsharp 和newtonsoft

winform cefsharp chart.js 再winform上使用chart.js 绘制动态曲线的更多相关文章

  1. js 图片压缩上传(纯js的质量压缩,非长宽压缩)

    下面是大神整理的demo,很实用,这里存一下备用,感谢大神! 此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下 <!DOCTYPE ht ...

  2. js再学习笔记

    #js再学习笔记 ##基本 1.js严格区分大小写   2.js末尾的分号可加,也可不加   3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...

  3. [Winform]CefSharp ——js调用c#方法

    摘要 有时我们在winform中嵌入浏览器,需要在页面上读取电脑上的一些信息,这个时候就需要用到CefSharp的RegisterJsObject进行注册方法然后供js进行调用了. 一个例子 我们在w ...

  4. winform中button点击后再点击其他控件致使button失去焦点,此时button出现黑色边线,去掉黑色边线的方法

    winform中button点击后再点击其他控件致使button失去焦点,此时button出现黑色边线,去掉黑色边线的方法 button的FlatAppearence属性下,设置BorderSize= ...

  5. SNF开发平台WinForm之十三-单独从服务器上获取PDF文件进行显示-SNF快速开发平台3.3-Spring.Net.Framework

    1运行效果: 2开发实现: 如果需要单独显示PDF文件时用下面代码去实现,指定url地址. 地址: . 获取附件管理的实体对象: List<KeyValuePair<string, obj ...

  6. 如何基于Winform开发框架或混合框架基础上进行项目的快速开发

    在开发项目的时候,我们为了提高速度和质量,往往不是白手起家,需要基于一定的基础上进行项目的快速开发,这样可以利用整个框架的生态基础模块,以及成熟统一的开发方式,可以极大提高我们开发的效率.本篇随笔就是 ...

  7. C# winform 窗体应用程序之图片上传Oracle数据库保存字段BLOB

    C# winform 窗体应用程序之图片上传Oracle数据库保存字段BLOB 我用的数据库是Oracle,就目前来看,许多数据库现在都倾向于Oracle数据库,对ORACLE数据库基本的操作也是必须 ...

  8. 玩儿转物联网IoT - 在Beagle Bone Black上运行node.js 程序

    物联网(IoT)技术方兴未艾,智能手环,智能血压计,智能眼镜甚至智能鞋垫都开始进入我们的生活,各种智能设备层出不穷,世界已经到了一个"人有多大胆,地有多大产"的时代,不玩儿点物联网 ...

  9. 还原网站上压缩的js代码

    还原网站上压缩的js代码 我们经常可以看到一些网站,把所需的javascript代码压缩成一行,就像下图这样 这种代码浏览器能读懂,但正常人是没法阅读的. 既然浏览器能读,浏览器当然也能还原这段代码. ...

  10. 在Visual Studio上开发Node.js程序(2)——远程调试及发布到Azure

    [题外话] 上次介绍了VS上开发Node.js的插件Node.js Tools for Visual Studio(NTVS),其提供了非常方便的开发和调试功能,当然很多情况下由于平台限制等原因需要在 ...

随机推荐

  1. Linux Ubuntu配置国内源

    配置国内源 因为众所周知的原因,国外的很多网站在国内是访问不了或者访问极慢的,这其中就包括了Ubuntu的官方源. 所以,想要流畅的使用apt安装应用,就需要配置国内源的镜像. 市面上Ubuntu的国 ...

  2. MogDB/openGauss访问控制简介

    MogDB/openGauss 访问控制简介 SQL 可以针对不同的数据库对象赋予不同的权限,这样就可以限制用户对数据的不必要访问,提高数据访问的安全性.常见的 SQL 权限如下: SELECT/UP ...

  3. HarmonyOS 3.1版本发布,全面进入声明式开发

    原文:https://mp.weixin.qq.com/s/kyyYCjrl6E8MBxKpBSKNWg,点击链接查看更多技术内容.   开发者的脚步永不停歇,2022年我们发布了HarmonyOS ...

  4. Mysql之GTID

    一.GTID Mysql5.6引入GTID(Global Transaction IDs),多线程复制: 由服务器的UUID和事务ID号组成唯一标识某一个主机的某个事务的ID号: 每一个事务首部都有G ...

  5. task 如何终止线程

    前言 这个直接上代码. 代码逻辑是使用var tokenSource = new CancellationTokenSource(); 让tokenSource 去取消.值得注意的是取消线程后,线程会 ...

  6. 探索Kimi智能助手:如何用超长文本解锁高效信息处理新境界

    目前,Kimi备受瞩目,不仅在社交平台上引起了广泛关注,而且在解决我们的实际问题方面也显示出了巨大潜力.其支持超长文本的特性使得我们能够更加灵活地配置信息,避免了频繁与向量数据库进行交互以及编写提示词 ...

  7. 力扣1050(MySQL)-合作过至少三次的演员和导演(简单)

    题目: ActorDirector 表: 写一条SQL查询语句获取合作过至少三次的演员和导演的 id 对 (actor_id, director_id) 示例:  建表语句: 1 create tab ...

  8. 力扣578(MySQL)-查询回答率最高的问题(中等)

    题目: 从 survey_log 表中获得回答率最高的问题,survey_log 表包含这些列:id, action, question_id, answer_id, q_num, timestamp ...

  9. 力扣441(java&python)-排列硬币(简单)

    题目: 你总共有 n 枚硬币,并计划将它们按阶梯状排列.对于一个由 k 行组成的阶梯,其第 i 行必须正好有 i 枚硬币.阶梯的最后一行 可能 是不完整的. 给你一个数字 n ,计算并返回可形成 完整 ...

  10. Apsara Stack 技术百科 | 边缘场景智能云化,让云无处不在

    ​简介:在过去十年间,随着计算技术的发展和移动互联网的广泛普及,各行业对数据本地计算和智能分析的需求与日俱增,越来越多的应用场景被接入了终端设备,导致终端侧的数据陡然增长,中心节点的处理算力不堪重负. ...