在.Net中使用AnyChart的简单例子（下）

本文链接：https://blog.csdn.net/ts8623/article/details/2564420

在上文《.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");

        }

显示效果：