在.Net開發中使用AnyChart的簡單例子（下）

時間 2019-11-15

標籤開發使用 anychart 簡單例子简体版

原文原文鏈接

在上文《在.Net開發中使用AnyChart的簡單例子（上）》中我分析了AnyChart所須要的XML數據格式，這裏就說說實現。 html

獲取了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節點寫入數據便可。 ide

模板anyChart_try.xml內容以下： ui

<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節點。 this

整個流程就是：載入模板——找到data_plot_settings節點——寫入報表類型參數（報表類型的關鍵字參看安裝目錄anychart/help/xmlReference/index.html章節）——找到data節點——經過foreach把符合要求的DataSet數據按格式寫下來——保存XML文件。 spa

這裏有個地方要注意，循環中必須判斷接收的數據是否是屬於同一組的。是同一組的，就沒必要新建series元素，直接在最後的一個point後面新建一個點便可。我這裏經過判斷BuildingId是否和上次載入的同樣來辨別這個問題。而事先DataSet中已經按照BuildingId進行了排序，同一個Id的數據都是貼放在一塊兒的了。 .net

這時，XML文件已經被寫好，等待綁定了。下面的方法把JavaScript寫入<body></body>中 code

/// <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的方法，便可顯示 xml

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");
 
}

顯示效果：