【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>
1.AnyChart控件相关
显示效果
2.AnyChart的简单原理
AnyChart是一个Flash做的控件,原理图在安装了AnyChart后的说明文档里面有,这里贴一下
其实很好理解,就是想办法生成一个符合AnyChart解析的XML数据源,通过JavaScript绑定给报表文件(SWF)
3.在.Net中使用AnyChart
知道了原理,就好办了。新建了一个项目
项目结构如下:
js,swf两个文件夹内的文件是试用版提供的,可以查看说明文档。在安装目录/anychart/help/docs/SimpleChart.html这一页的底部,有一个Open Folder With Sample的链接,打开就能找到这几个文件。而xml文件夹是我自己建的,用于存放数据源。
界面:
因为只是做一个小例子,界面上我只放了2个按钮,随意的给了个左对齐:
<div style="text-align:left;">
<asp:Button ID="barChart" runat="server" Text="柱状图" OnClick="barChart_Click" />
<asp:Button ID="lineChart" runat="server" Text="曲线图" OnClick="lineChart_Click" />
</div>
这两个按钮作用只是切换不同的报表而已,柱状图和曲线图。接下来只要完成两个部分:组装XML文件,往页面写入js,就行了。
后台:
我只写了寥寥几个方法:
/// <summary>
/// 获取DataSet
/// </summary>
/// <returns></returns>
protected DataSet GetDataSet()
/// <summary>
/// 创建出XML文件
/// </summary>
/// <param name="SeriesTypeNode">图表类型</param>
private void CreateXml(string SeriesTypeNode)
/// <summary>
/// 创建客户端脚本,在页面后面添加脚本
/// </summary>
/// <param name="page">当前页实例</param>
/// <param name="scriptName">脚本名称</param>
/// <param name="script">要创建的脚本</param>
public static void CreateStartupScript(Page page, string scriptName, string script)
获取DataSet就不详述了,每个人有自己不同的数据集。我的数据库结构如下:
报表要显示的字段就TotalUser和Time两个,TotalUse是Y轴,Time是X轴。怎么把数据放到XML文件中呢?这里,我们要分析一下AnyChart接受的XML文件的格式,拿自带文档中的SimpleChart章节的例子做说明,我们来看一下:
<anychart>
<charts>
<chart plot_type="CategorizedHorizontal">
<data>
<series name="Year 2003" type="Bar">
<point name = "Department Stores" y="637166"/>
<point name = "Discount Stores" y="721630"/>
<point name = "Men's/Women's Specialty Stores" y="148662"/>
<point name = "Juvenile Specialty Stores" y="78662"/>
<point name = "All other outlets" y="90000"/>
</series>
</data>
<chart_settings>
<title>
<text>Sales of ACME Corp.</text>
</title>
<axes>
<y_axis>
<title>
<text>Sales</text>
</title>
</y_axis>
<x_axis>
<labels align="Outside"/>
<title>
<text>Retail Channel</text>
</title>
</x_axis>
</axes>
</chart_settings>
</chart>
</charts>
</anychart>
可以看到,报表的数据就放在
<data>
<series name="Year 2003" type="Bar">
<point name = "Department Stores" y="637166"/>
<point name = "Discount Stores" y="721630"/>
<point name = "Men's/Women's Specialty Stores" y="148662"/>
<point name = "Juvenile Specialty Stores" y="78662"/>
<point name = "All other outlets" y="90000"/>
</series>
</data>
来源:oschina
链接:https://my.oschina.net/u/1254919/blog/161686