文档章节

在.Net开发中使用AnyChart的简单例子(上)

咲晚杍
 咲晚杍
发布于 2013/08/29 11:53
字数 753
阅读 411
收藏 3

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>

series中的name属性是这组数据的名字,type是报表显示类型,这是Bar(柱状图),point是这组数据的信息,name是X轴,y就是Y轴。所以,如果我们只是想获得一个能显示出图像的报表,而暂时不管它那些复杂的表现设置的话,只要写好data元素的内容即可。

 

本文转载自:http://www.evget.com/zh-CN/Info/catalog/17800.html

咲晚杍
粉丝 7
博文 75
码字总数 8143
作品 0
渝中
私信 提问
在.Net开发中使用AnyChart的简单例子(上)

1.AnyChart控件相关 显示效果 2.AnyChart的简单原理 AnyChart是一个Flash做的控件,原理图在安装了AnyChart后的说明文档里面有,这里贴一下 其实很好理解,就是想办法生成一个符合AnyChart解...

牛奶哎营养
2013/09/16
152
0
在.Net开发中使用AnyChart的简单例子(下)

在上文《在.Net开发中使用AnyChart的简单例子(上)》中我分析了AnyChart所需要的XML数据格式,这里就说说实现。 获取了DataSet后,我通过下面的简单算法写出需要的XML格式。 /// <summary> ...

咲晚杍
2013/09/02
791
0
跨浏览器、跨平台图表控件AnyChart v7.11.0发布|附下载

更新内容: 下载最新版AnyChart 完全可访问性支持(Section 508) 所有AnyChart图表现在都支持AAA级web可访问性标准(Section 508)使用灵活的a11y(可访问性)特征。AnyChart支持两种可访问...

鸟栖沙岩
2016/10/09
15
0
结合AnyChart做报表:一个生成AnyChart图形XML数据的工具类

今天头有点痛,所以不能详细地写了,先把代码贴上来,等身体状况稍微好一点,再继续完善。 1、(主角)一个使用XML模板生成Anychart XML数据的工具类 /****/package com.common.anychart; i...

十月阳光
2015/08/26
428
0
Flash图表AnyChart几个使用中过的问题

[使用Flash图表AnyChart创建交互式数字仪表盘?][1] Flash图表 AnyChart 的AnyChart Flash Component Dashboard mode 提供了一种创建仪表盘的新方式。本教程将手把手教你用AnyChart Flash组件...

愤怒的outman
2012/12/14
203
0

没有更多内容

加载失败,请刷新页面

加载更多

计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
昨天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部