文档章节

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

咲晚杍
 咲晚杍
发布于 2013/09/02 14:55
字数 934
阅读 791
收藏 6

在上文《在.Net开发中使用AnyChart的简单例子(上)》中我分析了AnyChart所需要的XML数据格式,这里就说说实现。

获取了DataSet后,我通过下面的简单算法写出需要的XML格式。

/// <summary>
 
/// 创建出XML文件
 
/// </summary>
 
/// <param name="SeriesTypeNode">图表类型</param>
 
private void CreateXml(string SeriesTypeNode)
 
{
 
    string CheckBuildingId = null;
 
    DataSet ds = new DataSet();
 
    ds = GetDataSet();
 
    XmlDocument XMLDoc = new XmlDocument();
 
    XMLDoc.Load(Server.MapPath(@"/xml/anychart_try.xml"));
 
    //处理图表类型
 
    XmlNode seriesTypeNode = XMLDoc.SelectSingleNode(@"/anychart/charts/chart/data_plot_settings");
 
    XmlElement chartSeriesTypeNode = (XmlElement)seriesTypeNode;
 
    chartSeriesTypeNode.SetAttribute("default_series_type", SeriesTypeNode);
 
    //查找data节点
 
    XmlNode seriesNode = XMLDoc.SelectSingleNode(@"/anychart/charts/chart/data");
 
 
 
    foreach (DataRow dr in ds.Tables[0].Rows)
 
    {
 
        if (CheckBuildingId == null)
 
        {
 
            CheckBuildingId = dr["BuildingId"].ToString();
 
            XmlElement Series = XMLDoc.CreateElement("series");
 
            Series.SetAttribute("name", dr["BuildingName"].ToString().Trim());
 
            XMLDoc.DocumentElement.AppendChild(Series);
 
            seriesNode.AppendChild(Series);
 
            XmlElement Point = XMLDoc.CreateElement("point");
 
            Point.SetAttribute("name", dr["Time"].ToString().Trim() + "点");
 
            Point.SetAttribute("y", dr["TotalUse"].ToString().Trim());
 
            Series.AppendChild(Point);
 
        }
 
        else if (CheckBuildingId == dr["BuildingId"].ToString())
 
        {
 
            XmlNode pointNode = XMLDoc.SelectSingleNode(@"/anychart/charts/chart/data/series[last()]");
 
            XmlElement Point = XMLDoc.CreateElement("point");
 
            Point.SetAttribute("name", dr["Time"].ToString().Trim() + "点");
 
            Point.SetAttribute("y", dr["TotalUse"].ToString().Trim());
 
            pointNode.AppendChild(Point);
 
        }
 
        else if (CheckBuildingId != dr["BuildingId"].ToString())
 
        {
 
            CheckBuildingId = dr["BuildingId"].ToString();
 
            XmlElement Series = XMLDoc.CreateElement("series");
 
            Series.SetAttribute("name", dr["BuildingName"].ToString().Trim());
 
            XMLDoc.DocumentElement.AppendChild(Series);
 
            seriesNode.AppendChild(Series);
 
            XmlElement Point = XMLDoc.CreateElement("point");
 
            Point.SetAttribute("name", dr["Time"].ToString().Trim() + "点");
 
            Point.SetAttribute("y", dr["TotalUse"].ToString().Trim());
 
            Series.AppendChild(Point);
 
        }
 
    }
 
    XMLDoc.Save(Server.MapPath(@"/xml/anychart_try1.xml"));
 
}

这个方法带有一个参数,目的的是接受按钮传来的报表类型。这里我预先制作了一个XML的模板,这样在写入数据的时候,就不用再去管别的元素了,直接找到data节点写入数据即可。

模板anyChart_try.xml内容如下:

<anychart>
 
  <charts>
 
    <chart plot_type="CategorizedVertical">
 
      <data_plot_settings default_series_type="Spline">
 
        <line_series>
 
          <tooltip_settings enabled="True" /> 
 
        </line_series>
 
    </data_plot_settings>
 
      <data>
 
 
 
      </data>
 
      <chart_settings>
 
        <title>
 
          <text>能耗日表</text>
 
        </title>
 
        <axes>
 
          <y_axis>
 
            <title>
 
              <text>时间</text>
 
            </title>
 
          </y_axis>
 
          <x_axis>
 
            <labels align="Outside"/>
 
            <title>
 
              <text>用量</text>
 
            </title>
 
          </x_axis>
 
        </axes>
 
      </chart_settings>
 
    </chart>
 
  </charts>
 
</anychart>

 

可以看到,data元素中间是空的,等待写入内容。而series节点还未被写入,每当增加一组数据(图表上就是一条线或者一组柱子,或者饼的其中一块,等等),就需要增加一个series节点。

整个流程就是:载入模板——找到data_plot_settings节点——写入报表类型参数(报表类型的关键字参看安装目录anychart/help/xmlReference/index.html章节)——找到data节点——通过foreach把符合要求的DataSet数据按格式写下来——保存XML文件。

这里有个地方要注意,循环中必须判断接收的数据是不是属于同一组的。是同一组的,就不必新建series元素,直接在最后的一个point后面新建一个点即可。我这里通过判断BuildingId是否和上次载入的一样来辨别这个问题。而事先DataSet中已经按照BuildingId进行了排序,同一个Id的数据都是贴放在一起的了。

这时,XML文件已经被写好,等待绑定了。下面的方法把JavaScript写入<body></body>中

/// <summary>
 
/// 创建客户端脚本,在页面后面添加脚本
 
/// </summary>
 
/// <param name="page">当前页实例</param>
 
/// <param name="scriptName">脚本名称</param>
 
/// <param name="script">要创建的脚本</param>
 
public static void CreateStartupScript(Page page, string scriptName, string script)
 
{
 
    Type cstype = page.GetType();
 
    ClientScriptManager cs = page.ClientScript;
 
    if (!cs.IsStartupScriptRegistered(cstype, scriptName))
 
    {
 
        cs.RegisterStartupScript(cstype, scriptName, script, true);
 
    }
 
}

 

建立一个JavaScript字符串,调用创建XML和写入js的方法,即可显示

protected void Page_Load(object sender, EventArgs e)
 
{
 
    string displayAnyChart = @" var chart = new AnyChart('./swf/AnyChart.swf'); ";
 
    displayAnyChart += "chart.width = 600;";
 
    displayAnyChart += "chart.height = 400;";
 
    displayAnyChart += "chart.setXMLFile('./xml/anychart_try1.xml');";
 
    displayAnyChart += "chart.write();";
 
 
 
    CreateStartupScript(this.Page, displayAnyChart, displayAnyChart);
 
}
 
 
 
protected void barChart_Click(object sender, EventArgs e)
 
{
 
    CreateXml("Bar");
 
}
 
 
 
protected void lineChart_Click(object sender, EventArgs e)
 
{
 
    CreateXml("Spline");
 
}
 显示效果:

 

 

总结

AnyChart是一个很优秀的报表控件,个人认为,其优缺点如下:

优点:显示效果非常出众,功能很多,运行速度也很快。使用XML作为数据源,Flash为载体,解决了跨平台的问题。

缺点:价格实在是不便宜。但试用版除了有个水印之外,没什么不同,看取舍了。

 

 

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

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

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

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

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

咲晚杍
2013/08/29
411
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

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部