您的位置：首页 > Web前端 > HTML

WPF中使用Echarts显示图表

2016-09-28 11:30 801 查看

在WPF程序当中，有多种场合使用图表工具，在.net4.0下有MSchart可供选择，但重绘困难，样式单一，而HTML大行其道的今天，有诸多的HTML开源图表可供选择，样式丰富，修改方便，调用简单。本文描述如何在WPF中使用Echarts。

一.下载ECharts

撰文时，ECharts的版本为2.2.7，下载链接如下：https://codeload.github.com/ecomfe/echarts/zip/2.2.7

二.在wpf中准备ECharts的使用环境

Echarts本质上是一个html5的文件，在wpf/winfrom程序中，可以使用webbrowser这个控件来加载本地的html文件。加载过程相对简单，可以参考：http://www.cnblogs.com/MaKui/archive/2011/08/02/2128842.html中第二点的描述，也可以选择使用webkit作为html的载体，下载地址：http://webkitdotnet.sourceforge.net/downloads.php。本文以webbrowser为例。

新建一个wpf工程文件，命名为：“EChartsDemo”，在设计界面添加如下代码：

<Grid>
<WebBrowser Name="Web">
</WebBrowser>
</Grid>

然后，就可以开始编辑我们需要的表格了，这里就拿官方的给的例子来做测试。

三.使用ECharts

将下载下来的ECharts文件中的dist文件夹全部拷到Debug文件夹下，然后新建一个html文件，代码如下：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="main" style="width:1900px;height:700px" />
<script src="echarts.js"></script>
<script src="echarts-all.js"></script>
<script>
myChart = echarts.init(document.getElementById('main'));
option = {
title: {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['最高气温', '最低气温']
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: '最高气温',
type: 'line',
data: [11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
},
{
name: '最低气温',
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [
{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
}
]
};

myChart.setOption(option);
</script>
</body>
</html>

以上代码来自：http://echarts.baidu.com/echarts2/doc/example/line1.html ，如果觉得默认的主题样式不好看，还可以使用ECharts的主题来进行切换，使用主题的方法如下：下载需要的主题js文件，可以在http://echarts.baidu.com/theme-builder/找到各个主题的下载链接，也允许使用者自行构建，以使用macarons为例，将下载好的macarons.js文件拷贝到dist文件夹下，在html文件中对其进行引用，然后就可以使用ECharts的初始化函数使用这个主题了，代码如下：

<script src="macarons.js"></script>
<script>
myChart = echarts.init(document.getElementById('main'),'macarons');

四.在WebBrowser中加载图表

在MainWindow的构造函数中定义web需要加载的文件，代码如下：

Web.Navigate(new Uri( Directory.GetCurrentDirectory() + "/dist/LineChart.html"));

此时调试就可以看到运行效果了，这里会出现一个比较奇怪的提示，

解决这个问题，需要在html中插入如下的注释代码：

<!-- saved from url=(0013)about:internet -->

再次运行即可显示在html中编辑的图表

五.交互

完成显示步骤后，我们可以通过代码来对图表进行刷新、更改、清除等一系列操作。也可以在图表中触发事件向WPF发出消息。

5.1 C# to js

这一步骤非常简单，只需插入如下代码即可：

Web.InvokeScript("Type",0);//Type js中的函数名称，0代指传入的参数

其中Type是js中需要被使用的函数的名字，0是需要传入的参数，在Demo中借用Type函数控制图表的显示和消失，在界面中添加按钮用以向html发送消息，代码如下：

<Button Name="load" HorizontalAlignment="Left" Content="卸载" Click="Button_Click" /><pre name="code" class="csharp">private void Button_Click(object sender, RoutedEventArgs e)
{
if (load.Content.ToString() == "加载")
{
Web.InvokeScript("Type", 1);
load.Content = "卸载";
}
else
{
Web.InvokeScript("Type",0);
load.Content = "加载";
}
}

4000

即可实现对html的控制，当然在实际应用中需要控制的参数较多，就需要仔细设计操作了。

5.2 js to C#

js由于是托管代码，调用C#需要足够的权限，所以在项目中添加一个新类，代码如下：

[PermissionSet(SecurityAction.Demand, Name = "FullTrust")]
[System.Runtime.InteropServices.ComVisible(true)]//给予权限并设置可见
public class WebAdapter
{
public void ShowMsg(string Msg)
{
Console.WriteLine(Msg);
}
}

js调用方法：

<button onclick="click1()" style="width:100px;height:20px">测试</button>
<script>
function click1()
{
window.external.ShowMsg("这是一条信息");
}
</script>

即可实现js调用C#.

Demo下载链接：Demo.rar

抛砖引玉，万望指正。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： WPF Echarts HTML WebKit 开源

相关文章推荐

新的分享

章节导航