Javascript 如何在C#.net中将.aspx页面保存为html文件时绘制动态JQ绘图

我正在使用bootstrap开发一个基于web的应用程序

我正在尝试在我的应用程序中将.aspx页面保存为html文件

这是我的代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using iTextSharp.text;
using iTextSharp.text.html.simpleparser;
using iTextSharp.text.pdf;


 protected void btnExport_Click(object sender, EventArgs e)
    {

        string FileNamePath = @"D:\Test\Export.html";
        StreamWriter sWriter = File.CreateText(FileNamePath);

        StringWriter sw = new StringWriter();
        HtmlTextWriter htw = new HtmlTextWriter(sw);
  pnlData.RenderControl(htw);
        sWriter.WriteLine(sw.ToString());
  sWriter.Close();
    }

   <panel id="pnlData" runat="server">


<style type="text/css">

//given css here

</style>

 <div class="col-sm-12">
        <div class="col-sm-12">
            <!-- List starts -->
            <ul class="today-datas">
                <!-- List #1 -->
                <li class="bred" style="width: 350px;">
                    <!-- Graph -->
                    <div class="pull-left">
                        <span id="todayspark5" class="spark"></span>
                    </div>
                    <!-- Text -->
                    <div class="datas-text pull-right">
                        <span>98%</span>Compliance</div>
                    <div class="clearfix">
                    </div>
                </li>
                <li style="width: 350px;">
                    <!-- Graph -->
                    <div class="pull-left">
                        <i class="icon-group"></i>
                    </div>
                    <!-- Text -->
                    <div class="datas-text pull-right">
                        <span>Yes</span>Reviewed</div>
                    <div class="clearfix">
                    </div>
                </li>
                <li style="width: 350px;">
                    <!-- Graph -->
                    <div class="pull-left">
                        <i class="icon-laptop"></i>
                    </div>
                    <!-- Text -->
                    <div class="datas-text pull-right">
                        <span>20</span>Outstanding Count</div>
                    <div class="clearfix">
                    </div>
                </li>
  </ul>
        </div>
    </div>
<div class="col-sm-12">
        <div class="col-sm-6">
            <!-- Widget -->
            <div class="widget" id="DivHeader" runat="server">
                <!-- Widget head -->
                <div class="widget-head">
                    <div class="pull-left">
                        Compliance Chart</div>
                    <div class="widget-icons pull-right">
                        <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a><a href="#" class="wclose">
                            <i class="icon-remove"></i></a>
                    </div>
                    <div class="clearfix">
                    </div>
                </div>
                <!-- Widget content -->
                <div class="widget-content">
                    <div class="padd" style="padding-bottom: 2px;">
                        <!-- Bar chart (Blue color). jQuery Flot plugin used. -->
                        <div id="curve-chart">
                        </div>
                    </div>
                    <div style="padding-bottom: 5px;">
                        <div class="legend" id="Legend" style="padding-left: 15px;">
                            <div class="header">
                                <span>Legend</span>
                            </div>
                            <table>
                                <tbody>
                                    <tr>
                                        <td>
                                            <span class="label bred"><i class="icon-2x icon-only"></i></span><span style="margin-left: 7px;">
                                                < 80% </span>
                                        </td>
                                        <td>
                                            <span style="margin-left: 20px;" class="label byellow"><i class="icon-2x icon-only">
                                            </i></span><span style="margin-left: 7px;">< 95% </span>
                                        </td>
                                        <td>
                                            <span style="margin-left: 20px;" class="label bgreen"><i class="icon-2x icon-only"></i>
                                            </span><span style="margin-left: 7px;">> 95% </span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- Widget ends -->
            </div>
        </div>
       </div>


 <script type="text/javascript">
            var chartResult = null;
            $(document).ready(function () { 
  var jsonurl = '/TestHandler/GetStatsData/Ajaxhandler.axd';
                $.ajax({
                    async: false,
                    url: jsonurl,
                    dataType: "json",
                    data: { AccId: 1 },
                    success: function (data) {
                        InitJQPlot(data);
                    }
                });
});

  function InitJQPlot(data) {                  
                var minValue = Math.round(Math.min.apply(Math, data.values)) - 1;
                var testData = [];
                var testLabel = [];
                var j = 0;
                for (var i = 0; i < data.Length; i++) {
                    testData.push([j, data.values[i]]);
                    testLabel.push([j, data.months[i]]);
                    j++;
                }
                var plot = $.plot($("#curve-chart"),
                   [{ data: testData, label: "Test Plot"}], {
                       series: {
                           lines: { show: true,
                               fill: true,
                               fillColor: {
                                   colors: [{
                                       opacity: 0.05
                                   }, {
                                       opacity: 0.01
                                   }]
                               }
                           },
                           points: { show: true }
                       },
                       grid: { hoverable: true, clickable: true, borderWidth: 0 },
                       yaxis: { min: minValue, max: 100 },
                       xaxis: {
                           ticks: testLabel
                       },
                       colors: ["#fa3031"]
                   });
}
</script>
</panel>
 <asp:Button ID="btnExport" OnClick="btnExport_Click" runat="server" Text="Export To HTML" />

使用系统；
使用System.Collections.Generic；
使用System.Linq；
使用System.Web；
使用System.Web.UI；
使用System.Web.UI.WebControl；
使用System.IO；
使用iTextSharp.text；
使用iTextSharp.text.html.simpleparser；
使用iTextSharp.text.pdf；
受保护的无效btnExport\u单击（对象发送方，事件参数e）
{
字符串FileNamePath=@“D:\Test\Export.html”；
StreamWriter sWriter=File.CreateText（FileNamePath）；
StringWriter sw=新的StringWriter（）；
HtmlTextWriter htw=新的HtmlTextWriter（sw）；
pnlData.RenderControl（htw）；
sWriter.WriteLine（sw.ToString（））；
sWriter.Close（）；
}
//这里给出了css


98%的合规性

宽度：350px；“>
是的

宽度：350px；“>
20未清数


合规图
传奇
< 80% 
< 95% 
> 95% 
var chartreult=null；
$（文档）.ready（函数（）{
var jsonurl='/TestHandler/GetStatsData/Ajaxhandler.axd'；
$.ajax({
async:false，
url:jsonurl，
数据类型：“json”，
数据：{AccId:1}，
成功：功能（数据）{
InitJQPlot（数据）；
}
});
});
函数InitJQPlot（数据）{
var minValue=Math.round（Math.min.apply（Math，data.values））-1；
var testData=[]；
var testLabel=[]；
var j=0；
对于（变量i=0；i

我在

元素中给出了我的css。我包括jquery.js，jquery ui.min.js，jquery.flot.js，jquery.flot.resize.js，jquery.flot.pie.js， jquery.flot.stack.js，sparkline.js，sparkline index.js

我在.aspx页面中获得了动态图表，但它不是在html文件中生成的。。我只是在

我没有得到带有动态图表的输出html文件

---

请帮助我使用动态图表创建html文件。

那么您正在从

D:\Test\Export.html

打开html文件？如果是，则生成图形数据的链接：

var jsonurl='/TestHandler/GetStatsData/Ajaxhandler.axd'

是相对的，因此当您在服务器上运行它时，它可以找到正确的。

 public List<object> testDataList = new List<object>();
 public List<string> testLabelList = new List<string>();

 protected void Page_Load(object sender, EventArgs e)
 {
 //Load data to testDataList  and testLabelList 
 }

 protected string JsontestDataArray
 {
    get
        {          
            var myArray = testDataList.ToArray();
            return new JavaScriptSerializer().Serialize(myArray);
        }
 }
 protected string JsontestLabelArray
 {
    get
        {
            var myArray = testLabelList.ToArray();
            return new JavaScriptSerializer().Serialize(myArray);
        }
 }

$(document).ready(function () {    
            var testDataList = {values: <%= JsontestDataArray %>}; 
            for (var i = 0; i < testDataList.values.length; i++){                          
            testData.push([i, testDataList.values[i]]);         
            }        
            var testLabelList = {values: <%= JsontestLabelArray %>}; 
            for (var j = 0; j < testLabelList.values.length; j++){                          
            testLabel.push([j, testLabelList.values[j]]);         
            }          
});