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),其提供了非常方便的开发和调试功能,当然很多情况下由于平台限制等原因需要在 ...
随机推荐
- 携手HMS Core统一扫码服务, 兴业证券优理宝App提升用户扫码体验
兴业证券优理宝App联合华为HMS Core,集成HMS Core统一扫码服务,在提升扫码成功率的同时,还支持C端用户用手机端APP扫描手表端二维码,实现行情在手机与手表间跨终端流转,行情信息,抬腕可 ...
- CMakeLists.txt 编写模板
新建文件 CMakeLists.txt # 设置cmake的最低版本 cmake_minimum_required(VERSION 2.8) # 指定为C++11 版本 set(CMAKE_CXX ...
- POJ2251 基础bfs
题目: 你进入了一个3D的宝藏地宫中探寻宝藏到了宝藏,你可以找到走出地宫的路带出宝藏,或者使用炉石空手回家. 地宫由立方体单位构成,立方体中不定会充满岩石.向上下前后左右移动一个单位需要一分钟.你不能 ...
- 【Python3.10.4】Centos7 ,centos8,centos9源码安装 python3.10.4 解释器
1.检查是否安装wget如果没有安装则: 终端执行: yum -y install wget 2.下载python3源码包 终端执行: wget https://www.python.org/ftp/ ...
- 【转】CentOS安装VMware Tools
[转]CentOS安装VMware Tools VMware 是非常好的虚拟机软件.如果系统安装了VMware Tools以后对虚拟机的性能会提升很多的.下面是如果在CentOS系统内安装VMware ...
- 基于Canvas实现的简历编辑器
基于Canvas实现的简历编辑器 大概一个月前,我发现社区老是给我推荐Canvas相关的内容,比如很多 小游戏.流程图编辑器.图片编辑器 等等各种各样的项目,不知道是不是因为我某一天点击了相关内容触发 ...
- 重新整理 mysql 基础篇————— 索引模型[五]
前言 简单整理一下索引模型. 正文 对我们开发人员来说,索引感觉非常的重要. 因为索引好用,但是不能多建,因为这影响插入,不能少建,因为这影响读取. 有些为了能够多建索引,通过从多个从库中读取数据,再 ...
- spring cloud 学习笔记 客户端（本地）均衡负载(三)
前言 在微服务中,一个服务可能即是服务端也是客户端,当别的服务调用该服务的时候这个服务就是服务端,当这个服务主动调用另外一个服务的时候,那么就是服务端. 作为客户端通过服务注册与发现获取某个服务的注册 ...
- mmcls 多标签模型部署在torch serve
GitHub仓库:gy-7/mmcls_multi_label_torchserve (github.com) 各个文件说明: cls_requests_demo:分类模型请求api服务的demo d ...
- 分布式文件存储-FastDFS
1.1 FastDFS简介 1.1.1 FastDFS体系结构 FastDFS是一个开源的轻量级分布式文件系统,它对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,解决了 ...