winform cefsharp chart.js 再winform上使用chart.js 绘制动态曲线
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>
winform cefsharp chart.js 再winform上使用chart.js 绘制动态曲线的更多相关文章
- js 图片压缩上传(纯js的质量压缩，非长宽压缩)
下面是大神整理的demo,很实用,这里存一下备用,感谢大神! 此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下 <!DOCTYPE ht ...
- js再学习笔记
#js再学习笔记 ##基本 1.js严格区分大小写 2.js末尾的分号可加,也可不加 3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...
- [Winform]CefSharp ——js调用c#方法
摘要 有时我们在winform中嵌入浏览器,需要在页面上读取电脑上的一些信息,这个时候就需要用到CefSharp的RegisterJsObject进行注册方法然后供js进行调用了. 一个例子 我们在w ...
- winform中button点击后再点击其他控件致使button失去焦点，此时button出现黑色边线，去掉黑色边线的方法
winform中button点击后再点击其他控件致使button失去焦点,此时button出现黑色边线,去掉黑色边线的方法 button的FlatAppearence属性下,设置BorderSize= ...
- SNF开发平台WinForm之十三-单独从服务器上获取PDF文件进行显示-SNF快速开发平台3.3-Spring.Net.Framework
1运行效果: 2开发实现: 如果需要单独显示PDF文件时用下面代码去实现,指定url地址. 地址: . 获取附件管理的实体对象: List<KeyValuePair<string, obj ...
- 如何基于Winform开发框架或混合框架基础上进行项目的快速开发
在开发项目的时候,我们为了提高速度和质量,往往不是白手起家,需要基于一定的基础上进行项目的快速开发,这样可以利用整个框架的生态基础模块,以及成熟统一的开发方式,可以极大提高我们开发的效率.本篇随笔就是 ...
- C# winform 窗体应用程序之图片上传Oracle数据库保存字段BLOB
C# winform 窗体应用程序之图片上传Oracle数据库保存字段BLOB 我用的数据库是Oracle,就目前来看,许多数据库现在都倾向于Oracle数据库,对ORACLE数据库基本的操作也是必须 ...
- 玩儿转物联网IoT - 在Beagle Bone Black上运行node.js 程序
物联网(IoT)技术方兴未艾,智能手环,智能血压计,智能眼镜甚至智能鞋垫都开始进入我们的生活,各种智能设备层出不穷,世界已经到了一个"人有多大胆,地有多大产"的时代,不玩儿点物联网 ...
- 还原网站上压缩的js代码
还原网站上压缩的js代码 我们经常可以看到一些网站,把所需的javascript代码压缩成一行,就像下图这样 这种代码浏览器能读懂,但正常人是没法阅读的. 既然浏览器能读,浏览器当然也能还原这段代码. ...
- 在Visual Studio上开发Node.js程序(2)——远程调试及发布到Azure
[题外话] 上次介绍了VS上开发Node.js的插件Node.js Tools for Visual Studio(NTVS),其提供了非常方便的开发和调试功能,当然很多情况下由于平台限制等原因需要在 ...
随机推荐
- openGauss数据库扩容指导
前置条件 当前集群状态正常 操作步骤 1.新节点创建用户和用户组,注意需要与当前集群的用户与用户组一致,密码也要保持一致.假设当前集群用户为 omm. 2.检查新节点环境变量,清理和 openGaus ...
- HDC2021技术分论坛：盘点分布式软总线数据传输技术中的黑科技
作者:houweibo,软总线首席技术专家:lidonghua,软总线技术专家 随着万物互联时代的到来,特别是大量媒体资源的涌入和使用,用户对传输的要求不断提高,怎样的传输技术才能满足未来的用户需求呢 ...
- Thymeleaf SSTI模板注入分析
环境搭建 先搭建一个SpringMVC项目,参考这篇文章,或者参考我以前的spring内存马分析那篇文章 https://blog.csdn.net/weixin_65287123/article/d ...
- 重新点亮linux 命令树————网络管理[十一二]
前言 简单整理一下网络管理. 正文 网络管理需要掌握: 网络状态查看 网络配置 路由命令 网络故障排除 网络服务管理 常用网络配置文件 网络状态的查看: 1.net-tools ---->1.i ...
- MVC过滤器简单刨析
前言 简单介绍一下过滤器. 正文 看下过滤器类型: action: 在动作方法之前及之后执行 result: 在action结果被执行前或者之后执行,比如说返回一个视图,再执行视图前执行一个方法,再执 ...
- 顺通鞋服ERP库存管理系统
鞋服ERP库存管理系统是专门为鞋服行业设计的企业资源规划软件,它提供了一系列库存管理功能,帮助鞋服企业有效管理库存流程和提升库存管理效率.以下是一些鞋服ERP库存管理系统常见的功能和特点: 1. 库存 ...
- 力扣1076(MySQL)-员工项目Ⅱ（简单）
题目: 编写一个SQL查询,报告所有雇员最多的项目. 查询结果格式如下所示: 解题思路: 方法一:将两个表联结,以project_id进行分组,统计员工数降序排序,然后筛选出第一条数据. 1 sel ...
- 云原生事件驱动引擎(RocketMQ-EventBridge)应用场景与技术解析
简介: RocketMQ 给人最大的印象一直是一个消息引擎.那什么是事件驱动引擎?为什么我们这次要推出事件驱动引擎这个产品?他有哪些应用场景,以及对应的技术方案是什么?本文我们就一起来看下. 作者:罗 ...
- 阿里巴巴在开源压测工具 JMeter 上的实践和优化
简介:Apache JMeter 是 Apach 旗下的开源压测工具,创建于 1999 年初,迄今已有超过 20 年历史.JMeter 功能丰富,社区(用户群体)庞大,是主流开源压测工具之一. 作者: ...
- 快手基于RocketMQ的在线消息系统建设实践
简介: 快手需要建设一个主要面向在线业务的消息系统作为 Kafka 的补充,低延迟.高并发.高可用.高可靠的分布式消息中间件 RocketMQ 正是我们所需的. 作者:黄理 黄理,10多年软件开发和架 ...