文档章节

在.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
154
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
430
0
Flash图表AnyChart几个使用中过的问题

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

愤怒的outman
2012/12/14
204
0

没有更多内容

加载失败,请刷新页面

加载更多

最简单的获取相机拍照的图片

  import android.content.Intent;import android.graphics.Bitmap;import android.os.Bundle;import android.os.Environment;import android.provider.MediaStore;import andr......

MrLins
今天
6
0
说好不哭!数据可视化深度干货,前端开发下一个涨薪点在这里~

随着互联网在各行各业的影响不断深入,数据规模越来越大,各企业也越来越重视数据的价值。作为一家专业的数据智能公司,个推从消息推送服务起家,经过多年的持续耕耘,积累沉淀了海量数据,在...

个推
今天
9
0
第三方支付-返回与回调注意事项

不管是支付宝,微信,还是其它第三方支付,第四方支付,支付机构服务商只要涉及到钱的交易都要进行如下校验,全部成功了才视为成功订单 1.http请求是否成功 2.校验商户号 3.校验订单号及状态...

Shingfi
今天
5
0
简述Java内存分配和回收策略以及Minor GC 和 Major GC(Full GC)

内存分配: 1. 栈区:栈可分为Java虚拟机和本地方法栈 2. 堆区:堆被所有线程共享,在虚拟机启动时创建,是唯一的目的是存放对象实例,是gc的主要区域。通常可分为两个区块年轻代和年老代。更...

DustinChan
今天
7
0
Excel插入批注:可在批注插入文字、形状、图片

1.批注一直显示:审阅选项卡-------->勾选显示批注选项: 2.插入批注快捷键:Shift+F2 组合键 3.在批注中插入图片:鼠标右键点击批注框的小圆点【重点不可以在批注文本框内点击】----->调出批...

东方墨天
今天
7
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部