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),其提供了非常方便的开发和调试功能,当然很多情况下由于平台限制等原因需要在 ...
随机推荐
- Python将依赖包导出到requirements.txt文件
代码 # 查询环境中已经安装的库 pip list # 将所有依赖库导出到 requirements.txt 文件 pip freeze > requirements.txt
- openGauss资源池化开发者入门指南(二)
openGauss 资源池化开发者入门指南(二) 一.内容简介 openGauss 资源池化是 openGauss 推出的一种新型的集群架构.通过 DMS 和 DSS 组件,实现集群中多个节点的底层存 ...
- 保护C#代码的艺术：深入浅出代码混淆技术
摘要 在C#开发中,代码的保护是一个不可忽视的问题.本文深入探讨了几种常用的C#代码混淆工具,帮助开发者理解如何有效地保护代码不被反编译.同时,本文也对混淆技术的优缺点进行了分析,并提供了一些实际使用 ...
- js 闭包(新)
前言 旧的没有搬过来,先写一下新的感悟. 正文 ECMAScript中,闭包指的是: 从理论角度:所有的函数.因为它们都在创建的时候就将上层上下文的数据保存起来了.哪怕是简单的全局变量也是如此,因为函 ...
- FPGA技术脚本使用
做fpga 不会脚本,基本跟残废一个概念.以前我觉得做FPGA应该学习什么人工智能,大数据,机器人.现在想起来真是傻逼,做fpga也好,做ic,做逻辑其实基本能力都是一样的. 一个学习tcl脚本,pe ...
- mysql5.7.20靠谱安装步骤
首先,我看过网上的其他教程. 其次,很多教程都过时了,或者按照步骤失败,反正我一次也没成功. 开始正题:首先,以管理员身份运行cmd 总共就两个命令: 1.mysqld --initialize-in ...
- shell编程实现用户循环输入
如果你想在Shell脚本中实现一个循环判断用户输入是否正确,并根据情况决定是否退出系统,可以使用一个无限循环(如while true)和条件语句来实现. 以下是一个示例代码,用于演示这种情况: #!/ ...
- 这10款VS Code神仙插件，嵌入式程序员必备
大家好,我是知微! 嵌入式软件开发工程师平时可能更多的是使用Source Insight.Keil.IAR来阅读代码,写代码. VSCode大家都听说过,功能十分强大,而且免费! 或许是因为这款软件上 ...
- 力扣551(java)-学生出勤记录Ⅰ（简单）
题目: 给你一个字符串 s 表示一个学生的出勤记录,其中的每个字符用来标记当天的出勤情况(缺勤.迟到.到场).记录中只含下面三种字符: 'A':Absent,缺勤'L':Late,迟到'P':Pres ...
- IT人才能嗑到的这对CP，甜！
简介: 提到文件存储,相信大家都不陌生,在浩瀚的存储发展史中,文件存储无疑是璀璨的,耀眼的.那么,在性能已经成为刚需,自动驾驶行业风起云涌的当下,文件存储与GPU这对CP又有怎样的含糖量呢?今天,我们 ...