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),其提供了非常方便的开发和调试功能,当然很多情况下由于平台限制等原因需要在 ...
随机推荐
- MogDB 使用向量化执行引擎进行调优
MogDB 使用向量化执行引擎进行调优 本文出处:https://www.modb.pro/db/430318 MogDB 数据库支持行执行引擎和向量化执行引擎,分别对应行存表和列存表. 一次一个 b ...
- 如何采用VuePress构建文档网站
作者:倾城 博客: https://www.codingbrick.com 寄语:当你意识到面子不重要时,你才算个真正的成年人. 在建设博客的初期,我采用GitBook构建了编码专家的专栏系统.Git ...
- linux 性能自我学习 ———— cpu 高怎么办 [三]
前言 linux 性能分析自我学习. 正文 一般我们说cpu,一般是什么高呢? 一般是指cpu 使用率高. 那么什么是cpu 使用率呢? cpu 使用率 = 1- 空闲时间/总cpu 时间 平均cpu ...
- ArcPy自动绘制大量地图并设置地图要素：Python
本文介绍基于Python语言中ArcPy模块,实现ArcMap自动批量出图,并对地图要素进行自定义批量设置的方法. 1 任务需求 首先,我们来明确一下本文所需实现的需求. 现有通过Pyth ...
- 当服务器间通讯出现No route to host(Host unreachable)
服务器间通讯出现No route to host(Host unreachable) 背景:因为某些原因,主机房服务器集体重启,其中部署的系统也需要重启,负责的系统是五台服务器,两台用来作为应用的应用 ...
- OpenYurt 之 Yurthub 数据过滤框架解析
简介:OpenYurt 是业界首个非侵入的边缘计算云原生开源项目,通过边缘自治,云边协同,边缘单元化,边缘流量闭环等能力为用户提供云边一体化的使用体验.在 Openyurt 里边缘网络可以使用数据过滤 ...
- 无缝融入 Kubernetes 生态 | 云原生网关支持 Ingress 资源
简介:Kubernetes 一贯的作风是通过定义标准来解决同一类问题,在解决集群对外流量管理的问题也不例外.Kubernetes 对集群入口点进行了进一步的统一抽象,提出了 3 种解决方案:Node ...
- Spring Cloud Gateway一次请求调用源码解析
简介: 最近通过深入学习Spring Cloud Gateway发现这个框架的架构设计非常简单.有效,很多组件的设计都非常值得学习,本文就Spring Cloud Gateway做一个简单的介绍,以及 ...
- WPF 漂亮的现代化控件 新 ModernWPF 界面库
这是一个在 GitHub 上完全开源的库,有十分漂亮的界面,整个都是 Win10 风,界面部分和默认 UWP 相近 这个库支持了 .NET Framework 4.5 和以上的版本,以及 .NET C ...
- LLM应用实战：当KBQA集成LLM(二)
1. 背景 又两周过去了,本qiang~依然奋斗在上周提到的项目KBQA集成LLM,感兴趣的可通过传送门查阅先前的文章<LLM应用实战:当KBQA集成LLM>. 本次又有什么更新呢?主要是 ...