在ASP中创建图形.. NET与Morris.js的AJAX和http处理程序

本文关键字：AJAX http 程序 处理 js Morris ASP 创建 图形 NET | 更新日期: 2023-09-27 18:06:48

我正在学习如何使用morris.js插件在asp.net中创建线形图。我只能从表中显示一个标签和一个值，但是当我使用标签作为DateTime.Now.AddDays(I). tostring ("yyy-MM-dd")时，我能够在图中显示值，而不是图工作得很好，值显示为每个日期，但我需要使用表中的标签。

        GraphData graphData;
        GraphDataList graphDataList = new GraphDataList();
        graphDataList.ListOfGraphData = new List<GraphData>();
        String InsertQuery = "Select name, value from graph1";
        try
        {
            conn.Open();
            Random random = new Random();
            SqlCommand cmd = new SqlCommand(InsertQuery, conn);
            SqlDataAdapter sa = new SqlDataAdapter(InsertQuery, conn);
            DataSet ds = new DataSet();
           // sa.Fill(ds, "graph");
            int index = 0;
            SqlDataReader da = cmd.ExecuteReader();
            while (da.Read())
            {
                label.Add(da.GetString(0));
                value.Add(da.GetString(1));
            }
            while (index < label.Count)
            {
                graphData = new GraphData();
                graphData.label =         DateTime.Now.AddDays(index).ToString("yyyy-MM-dd");
                //graphData.value = Convert.ToString(random.Next(index, 10000));
               // graphData.label = label[index];
                graphData.value = value[index];
                graphDataList.ListOfGraphData.Add(graphData);
                index++;
            } 
                    conn.Close();

在ASP中创建图形.. NET与Morris.js的AJAX和http处理程序

验证javascript看起来像这样:

        Morris.Line({
            element: 'area-example',
            data: Graph(),
            xkey: 'label',
            ykeys: ['value'],
            labels: ['value']
        });
  function Graph() {
        var data = "";
        $.ajax({
            type: 'GET',
            url: "http://localhost:60539/GraphHandler.ashx",
            dataType: 'json',
            async: false,
            contentType: "application/json; charset=utf-8",
            data: { 'GraphName': 'line' },
            success: function (result) {
                data = result;
            },
            error: function (xhr, status, error) {
                alert(error);
            }
        });
        return data;
    }
在aspx文件中添加:<div id="area-example"></div>

element参数为div标签的ID名称data:返回JSON值的函数xkey和ykey JSON值的名称，在您的示例中是"label"和"value"

相关文章：