anychart java实例_在.Net开发中使用AnyChart的简单例子（上）

布满荆棘的人生 2022-11-05 05:16 38阅读 0赞

1.AnyChart控件相关

显示效果

![d4623aa2b4047d8e52ff5a557f4f1515.png][]

2.AnyChart的简单原理

AnyChart是一个Flash做的控件，原理图在安装了AnyChart后的说明文档里面有，这里贴一下

![13f78e7946e0b4b8d594137f9ce4e67f.png][]

其实很好理解，就是想办法生成一个符合AnyChart解析的XML数据源，通过JavaScript绑定给报表文件(SWF)

3.在.Net中使用AnyChart

知道了原理，就好办了。新建了一个项目

项目结构如下：

![7e189e1dad1873dec51429a44f18159c.png][]

js，swf两个文件夹内的文件是试用版提供的，可以查看说明文档。在安装目录/anychart/help/docs/SimpleChart.html这一页的底部，有一个Open Folder With Sample的链接，打开就能找到这几个文件。而xml文件夹是我自己建的，用于存放数据源。

界面：

因为只是做一个小例子，界面上我只放了2个按钮，随意的给了个左对齐：

这两个按钮作用只是切换不同的报表而已，柱状图和曲线图。接下来只要完成两个部分：组装XML文件，往页面写入js，就行了。

后台：

我只写了寥寥几个方法：

///

/// 获取DataSet

///

protected DataSet GetDataSet()

///

/// 创建出XML文件

///

/// 图表类型

private void CreateXml(string SeriesTypeNode)

///

/// 创建客户端脚本，在页面后面添加脚本

///

/// 当前页实例

/// 脚本名称

/// 要创建的脚本

public static void CreateStartupScript(Page page, string scriptName, string script)

获取DataSet就不详述了，每个人有自己不同的数据集。我的数据库结构如下：

![a2b7cdf3c538ab8f4db00db229aacb55.png][]

报表要显示的字段就TotalUser和Time两个，TotalUse是Y轴，Time是X轴。怎么把数据放到XML文件中呢？这里，我们要分析一下AnyChart接受的XML文件的格式，拿自带文档中的SimpleChart章节的例子做说明，我们来看一下：

Sales of ACME Corp.

Sales

Retail Channel

可以看到，报表的数据就放在

[d4623aa2b4047d8e52ff5a557f4f1515.png]: /images/20221023/c04fec578fe34a6c8e5872281da91cea.png
[13f78e7946e0b4b8d594137f9ce4e67f.png]: /images/20221023/fe9c0d60adde47ccbca5fe5fc2cc379f.png
[7e189e1dad1873dec51429a44f18159c.png]: /images/20221023/ced9bf796acc44dd95875ae5ce4a8153.png
[a2b7cdf3c538ab8f4db00db229aacb55.png]: /images/20221023/4071c6fc5d7c45a4919f09dcacdc23cc.png