WPF中使用Echarts显示图表

2016-09-28 19:20:13来源:CSDN作者:defrt4人点击

在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 = "加载";            }                    }

即可实现对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

抛砖引玉,万望指正。






最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台