前几天,在 《记录一次自己准备汇报的过程》 中,提到我用 C# 语言做了一个封装 Echarts 的用户控件,今天系里一位老师,让我帮忙绘制一下这幅图表。
于是,我继续对 Echarts 中的 关系图 进行封装,绘制之后的图表如下所示:
img02 顶点表
img03 边表
img04 图表1
后面两幅图是根据 顶点表 和 边表 构造而成的。根据内容应该是有关于概率与数理统计课程的知识图谱。下面是我学习线性代数组建的知识图谱,有关知识图谱的知识以及具体应用,我会在后面来介绍。
img06 线性代数的知识图谱
img07 线性代数的知识图谱
下面介绍一下封装 Echarts 的大体思路:
首先,我们来看看 Echarts 官方给的引用 Eharts 的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
从这个例子中,我们可以看到绘制图表最关键的就是构造option
对象,然后把这个对象作为参数传给setOption()
方法,这样根据option
对象中配置的参数,如title
、legend
、xAxis
、yAxis
、series
等,就可以绘制相应的图表了。
而 C# 开发环境中有专门用来显示网页的 WebBrowser
控件,通过该控件的Navigate()
方法,我们可以在该控件中打开对应位置的网页。通过该控件的HtmlDocument
属性可以得到代表当前网页的Document
对象,通过该对象的InvokeScript()
方法,可以执行该Document
中包含的JavaScript
代码。
//WebBrowser中的属性与方法
public void Navigate(string urlString);
public HtmlDocument Document { get; }
//HtmlDocument中的方法
public object InvokeScript(string scriptName, object[] args);
有了这些知识储备,我们就可以在指定目录放置一个展示 Echarts 图表的网页(例如:echarts.html
),在里面写一个接收 option
对象并给myChart.setOption(option)
赋值的JavaScript
函数(showChart(option)
)就可以了。
网页部分的代码(echarts.html
):
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
<script src="./jquery-1.11.2.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="./json2.js"></script>
<head>
<title></title>
</head>
<body>
<div class="container-fluid">
<div id="main" style="height:350px;"></div>
</div>
<script src="./echarts.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
</script>
<script type="text/javascript">
function showChart(option) {
myChart.clear();
var op = JSON.parse(option);
myChart.setOption(op);
}
function setPosition(height) {
var divMain = document.getElementById("main");
divMain.style.height = height + "px";
window.onresize = myChart.resize();
}
</script>
</body>
</html>
自定义控件部分的代码:
public partial class Echarts : UserControl
{
public Echarts()
{
InitializeComponent();
}
public object Option { get; set; }
private bool _blnDocumentLoaded;
public void InitialECharts()
{
if (_blnDocumentLoaded)
{
object[] objArray = new object[1];
objArray[0] = this.Option;
HtmlDocument htmlDocument = webBrowser1.Document;
if (htmlDocument != null)
htmlDocument.InvokeScript("showChart", objArray);
}
else {
string strHtml = Application.StartupPath + @"\echarts.html";
if (File.Exists(strHtml))
{
webBrowser1.Navigate(strHtml);
}
}
}
private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
object[] objArray = new object[1];
objArray[0] = Option;
HtmlDocument htmlDocument = webBrowser1.Document;
if (htmlDocument != null)
{
htmlDocument.InvokeScript("showChart", objArray);
objArray[0] = Height;
htmlDocument.InvokeScript("setPosition", objArray);
_blnDocumentLoaded = true;
}
}
private void webBrowser1_SizeChanged(object sender, EventArgs e)
{
if (_blnDocumentLoaded)
{
object[] objArray = new object[1];
objArray[0] = Height;
HtmlDocument htmlDocument = webBrowser1.Document;
if (htmlDocument != null)
htmlDocument.InvokeScript("setPosition", objArray);
}
}
}
到此为止,这个封装 Echarts 的控件就做好了,至于如何利用 C# 语言生成option
对象,即一个Json
数据的方法,我在后面会为大家介绍,今天就到这里吧!See You!
经过8年多的发展,LSGO软件技术团队在地理信息系统、数据统计分析、计算机视觉领域积累了丰富的研发经验,也建立了人才培养的完备体系。
欢迎对算法设计与实现感兴趣的同学加入,与我们共同成长进步。
联系客服