winform内嵌html，通过Flot插件实现图表显示
16lz
2021-01-22
目前网上有很多插件来完成图表的制作，但是大部分都是以JS插件的显示实现的，虽然在winform也有MS-chart工具，它功能也是相当的强大，但是随着JS个快速发展，我们就希望能够将html引入winform程序中，在html中使用引用JS插件，通过html展现图表。
现在网上有很多的JS插件完成图表制作，如，JS Chart, highcharts等等，这里我们使用的是另外一个插件flotcharts.我们可以自行去相关官方网站学习在html中如何使用这些插件。
下来我们主要介绍的是在winform中内使用html以及二者之间的相互调用。一般在winform中有两种方法完成，一个是通过SWF，一个是通过webBrowser。在这里我们是通过webBrowser实现，它是winform中提供的一个工具。我们在可以直接将该工具拖到窗体上即可，如下：
上图中空白处就是webBrowser控件。上方的是5个winform按钮，我们在winform中实现按钮的单击事件，在实现的过程中调用html中JS函数，通过JS 方法来改变html的内容，最终呈现在form窗体中。
首先我们要在项目中添加一个html文件，在这个文件中引用相应的JS插件。我的html文件如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>AnalysisChart</title>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.js"></script> //必须
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script> //必须
<script language="javascript" type="text/javascript" src="jquery.flot.pie.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.categories.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.crosshair.js"></script>
<script type="text/javascript">
var timeout;
var opentimer = false;
//设置webBrowser的大小
function IniteContainer(wd, hg) {
// alert(wd+hg);
$("#placeholder").css("height", hg).css("width", wd);
}
function viewChart(dd2) {
var d1 = [];
for (var i = 0; i < 14; i += 0.5) {
d1.push([i, Math.sin(i)]);
}
// var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
var d2 = $.parseJSON(dd2); //jquery.parseJSON()方法解析json序列化数据
// alert(d2);
var d3 = [];
for (var i = 0; i < 14; i += 0.5) {
d3.push([i, Math.cos(i)]);
}
var d4 = [];
for (var i = 0; i < 14; i += 0.1) {
d4.push([i, Math.sqrt(i * 10)]);
}
var d5 = [];
for (var i = 0; i < 14; i += 0.5) {
d5.push([i, Math.sqrt(i)]);
}
var d6 = [];
for (var i = 0; i < 14; i += 0.5 + Math.random()) {
d6.push([i, Math.sqrt(2 * i + Math.sin(i) + 5)]);
}
$.plot("#placeholder", [{
data: d1, //经过json解析的数据是一个数组，可以直接赋值
lines: { show: true, fill: true }
}, {
data: d2,
bars: { show: true }
}, {
data: d3,
points: { show: true }
}, {
data: d4,
lines: { show: true }
}, {
data: d5,
lines: { show: true },
points: { show: true }
}, {
data: d6,
lines: { show: true, steps: true }
}]);
}
//饼状图
function Pie(pieData) {
// alert(pieData);
if (opentimer) {
clearTimeout(timeout);
opentimer = false;
}
var dataRec = $.parseJSON(pieData);
$("#placeholder").unbind();
$.plot("#placeholder", dataRec, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 3 / 4,
formatter: labelFormatter,
background: {
opacity: 0.5,
color: '#000'
}
}
}
},
legend: {
show: false
}
});
}
function labelFormatter(label, series) {
return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
}
//动态显示曲线
var upInterval = 40;
var plot;
function wave(internal) {
if (opentimer) {
clearTimeout(timeout);
opentimer = false;
}
var path = window.external.WaveData('hell world');
var data = $.parseJSON(path);
// alert(data);
upInterval = internal;
plot = $.plot("#placeholder", [data], { //注意：虽然经过解析后是一个数组对象，但是此处还是需要添加“[]”
series: {
shadowSize: 0
},
yaxes: {
min: 0,
max: 100
},
xaxes: {
show: false
}
});
update();
}
function update() {
var path = window.external.WaveData('hell world');
var data = $.parseJSON(path);
plot.setData([data]);
plot.draw();
opentimer = true;
timeout = setTimeout(update, upInterval);
}
// 柱状图
function Bar(barData) {
if (opentimer) {
clearTimeout(timeout);
opentimer = false;
}
// alert(barData);
var barRec = $.parseJSON(barData);
// alert(barRec);
$("#placeholder").unbind();
$.plot("#placeholder", [barRec], {
series:
{
bars:
{
show: true,
barWidth: 0.6,
align: "center"
}
},
xaxis:
{
mode: "categories", //必须引用jquery.flot.categories.js
tickLength: 0
}
});
}
//堆积图
function stacking(dataone, datatwo, datathr) {
if (opentimer) {
clearTimeout(timeout);
opentimer = false;
}
var dtOne = $.parseJSON(dataone);
var dttwo = $.parseJSON(datatwo);
var dtthr = $.parseJSON(datathr);
$("#placeholder").unbind();
$.plot("#placeholder", [dtOne, dttwo, dtthr], {
series: {
stack: true,
lines:
{
show: false,
fill: true,
steps: false
},
bars:
{
show: true,
barWidth: 0.6
}
}
});
}
//实时显示曲线值
function Tracking(dataSin, dataCos) {
var dtsin = $.parseJSON(dataSin);
var dtcos = $.parseJSON(dataCos);
plot = $.plot("#placeholder", [
{ data: dtsin, label: "sin(x) = -0.00" },
{ data: dtcos, label: "cos(x) = -0.00" }
], {
series: {
lines: {
show: true
}
},
crosshair: {
mode: "x"
},
grid: {
hoverable: true,
autoHighlight: false
},
yaxis: {
min: -1.2,
max: 1.2
}
});
var legends = $("#placeholder .legendLabel");
legends.each(function () {
// fix the widths so they don't jump around
$(this).css('width', $(this).width());
});
var updateLegendTimeout = null;
var latestPosition = null;
function updateLegend() {
updateLegendTimeout = null;
var pos = latestPosition;
var axes = plot.getAxes();
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
return;
}
var i, j, dataset = plot.getData();
for (i = 0; i < dataset.length; ++i) {
var series = dataset[i];
// Find the nearest points, x-wise
for (j = 0; j < series.data.length; ++j) {
if (series.data[j][0] > pos.x) {
break;
}
}
// Now Interpolate
var y,
p1 = series.data[j - 1],
p2 = series.data[j];
if (p1 == null) {
y = p2[1];
} else if (p2 == null) {
y = p1[1];
} else {
y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
}
legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
}
}
$("#placeholder").bind("plothover", function (event, pos, item) {
latestPosition = pos;
if (!updateLegendTimeout) {
updateLegendTimeout = setTimeout(updateLegend, 50);
}
});
}
</script>
</head>
<body>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder" style="height: 100">
</div>
</div>
</div>
</body>
</html>
以上已经准备好了html文件，接下来看看怎么在winform中的单击事件中调用对应的js，以及从winform传递参数到JS和从JS传递参数到winform的函数中。
- 从winform到JS
更多相关文章
- Emmet插件快速编写html小技巧
- html提示框插件
- Wordpress主题调试：插件侧边栏导致原始侧边栏不显示
- Ajax上传插件。handleError未找到
- 使用AJAX与拖放jQuery插件
- weiphp插件开发注意
- 如何将Composer中的CakePHP插件安装到app / Plugin中
- 如何将数据从MySQL表放入谷歌图表API?
- jQuery通过igorescobar jQuery掩码插件验证电话号码输入。