集成jQuery插件和数据库

这个插件对静态值工作正常。但我想使用数据库中的值。这是一个3d图表。我已经尝试了一切，但找不到任何解决方案。这对我来说非常紧迫。所以帮助。我尝试了各种各样的东西。搜索可能解释这一点的每个可能的网站。但迄今为止还没有任何帮助。甚至搜索了这种插件的网站，但没有找到适当的文档。对于其他想要将任何jQuery插件与其数据库集成在一起的开发人员来说，这也会变得很糟糕。集成jQuery插件和数据库

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Highcharts Example</title> 




     <script type="text/javascript"> 
     var mysuperdata= null; 
     jQuery.ajax({ 
     url: url: "Default2.aspx/GetData", 
     contentType: "application/json; charset=utf-8", 
     data: { "param1": p1, "inicialDate": inicialDate, "finalDate": finalDate }, 
     dataType: "jsonp", 
     success: function (d) { mysuperdata = d } 
     }); 


    </script> 


<script 
    type="text/javascript"                     
    src= 
    "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript"> 
     $(function() { 
      var chart; 
      $(document).ready(function() { 
       chart = new Highcharts.Chart({ 
        chart: { 
         renderTo: 'container', 
         plotBackgroundColor: null, 
         plotBorderWidth: null, 
         plotShadow: false 
        }, 
        title: { 
         text: 'Browser market 
         shares at a specific website, 2010' 
        }, 
        tooltip: { 
         pointFormat: '{series.name}: 
          <b>{point.percentage}%</b>', 
         percentageDecimals: 1 
        }, 
        plotOptions: { 
         pie: { 
          allowPointSelect: true, 
          cursor: 'pointer', 
          dataLabels: { 
           enabled: true, 
           color: '#000000', 
           connectorColor: '#000000', 
           formatter: function() { 
            return '<b>' + this.point.name + 
            '</b>: ' + this.percentage + ' %'; 
           } 
          } 
         } 
        }, 
        series: [{ 
         type: 'pie', 
         name: 'Browser share', 
         data: mysuperdata 
        }] 
       }); 
      }); 

     }); 
    </script> 
    </head> 
    <body> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
     <script src="http://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 400px; height: 
        400px; margin: 0 auto"></div> 

      </body> 
      </html>  using System; 
     using System.Collections.Generic; 
     using System.Linq; 
     using System.Web; 
     using System.Web.UI; 
     using System.Web.UI.WebControls; 
     using System.Web.Services; 
     using System.Web.Script.Services; 

     public partial class Default2 : System.Web.UI.Page 
     { 
     protected void Page_Load(object sender, EventArgs e) 
     { 

     } 
     [WebMethod] 
     [ScriptMethod(ResponseFormat = ResponseFormat.Json, XmlSerializeString = false)] 
     public static Array GetData() 
     { 
      return new Dictionary<string, double>() 
       { 
       { "Firefox", 45 }, 
       { "IE", 24.8 }, 
       { "Chrome", 12.8 }, 
       { "Safari", 8.5 }, 
       { "Opera", 5.2 }, 
       { "Outros", 3.7 }, 
       }.ToArray(); 
      } 
      }

我编辑了代码adriano，但它仍然不工作。它显示一个空白页面。我不知道现在该做什么。也许你可以复制&将我的代码粘贴到你的Visual Studio中，看看有什么不对。 Buddy帮忙。我会马上给你我的赏金。我只想要一种方法来做到这一点

来源

2013-04-08 DividesByZero

[链接]（http://stackoverflow.com/questions/15871794/jquery-plugin-to-integrate-with-database）：两个几乎相同的问题从不同的人在几分钟内彼此：发生了什么？ – 2013-04-08 06:16:29

您需要发送另一个AJAX请求到服务器和服务器脚本以从数据库中获取值并返回到您的AJAX方法。然后你应该将这些值传递给你的模块来构建图表。

来源

2013-04-08 05:33:25

人们帮助我.i开始这个赏金，因为我真的需要这样的事情发生。我有很大的压力来完成this.im没有得到代码。因为我很新。 – DividesByZero 2013-04-13 17:54:46

阿德里亚诺我只有9个小时给我150分的赏金。请在这之前回答它，以便我可以给你那些积分 – DividesByZero 2013-04-20 06:07:08

这很难解释，但在这里我们使用highcharts和加载数据库中的数据。

首先，您需要知道使用jquery将调用发送到使用JSON的webmethod。如果您使用的是C＃可能会是这样的：

的Javascript：

var mysuperdata= null; 
jQuery.ajax({ 
    url: url: "Data.aspx/GetData", 
    contentType: "application/json; charset=utf-8", 
    data: { }, 
    dataType: "jsonp", 
    success: function (d) { mysuperdata = d } 
});

在这个例子中，你正在访问的页面Data.aspx execulting方法的GetData传递任何参数。但是你可以传递参数。

C＃：

[WebMethod] 
[ScriptMethod(ResponseFormat = ResponseFormat.Json, XmlSerializeString = false)] 
public static Array GetData() 
{ 
    return new Dictionary<string, double>() 
    { 
     { "Firefox", 45 }, 
     { "IE", 24.8 }, 
     { "Chrome", 12.8 }, 
     { "Safari", 8.5 }, 
     { "Opera", 5.2 }, 
     { "Outros", 3.7 }, 
    }.ToArray(); 
}

现在我们知道得到的数据！这个数据是在聊天的序列数据很重要的事情，你发送此JSON：

 [ 
      ['Firefox', 45.0], 
      ['IE', 26.8], 
      { 
       name: 'Chrome', 
       y: 12.8, 
       sliced: true, 
       selected: true 
      }, 
      ['Safari', 8.5], 
      ['Opera', 6.2], 
      ['Others', 0.7] 
     ]

你的C＃必须返回一个数组这样的对象，很容易用C＃来安装。

最后，你有你的图表：

 $(function() { 
     var chart; 
     $(document).ready(function() { 
      chart = new Highcharts.Chart({ 
       chart: { 
        renderTo: 'container', 
        plotBackgroundColor: null, 
        plotBorderWidth: null, 
        plotShadow: false 
       }, 
       title: { 
        text: 'Browser market 
        shares at a specific website, 2010' 
       }, 
       tooltip: { 
        pointFormat: '{series.name}: 
         <b>{point.percentage}%</b>', 
        percentageDecimals: 1 
       }, 
       plotOptions: { 
        pie: { 
         allowPointSelect: true, 
         cursor: 'pointer', 
         dataLabels: { 
          enabled: true, 
          color: '#000000', 
          connectorColor: '#000000', 
          formatter: function() { 
           return '<b>' + this.point.name + 
           '</b>: ' + this.percentage + ' %'; 
          } 
         } 
        } 
       }, 
       series: [{ 
        type: 'pie', 
        name: 'Browser share', 
        data: mysuperdata 
       }] 
      }); 
     }); 

    });

当然，你可以返回更多的值为1，您的图表是3D，大概更复杂，这同样只是一个解释，你可以如何从数据库中的数据并插入你的图表...请尝试把你的问题！

来源

2013-04-12 16:33:21

对不起阿德里亚诺，但我不能让你适当。我很安静新this.but仍然我正在尽我所能了解this.it将gr8，如果只有你可以使它更容易理解我的例子 – DividesByZero 2013-04-12 18:53:15

我试过你的code.but似乎我不能够了解如何做它可以发布webmethod的代码 – DividesByZero 2013-04-13 09:16:13

@DividesByZero对于'WebMethod'属性，使用'[System.Web。 Services.WebMethod]'，或者使用System.Web.Services;'添加到类文件的顶部。 – Jesse 2013-04-13 17:33:25

如果你不想做ajax/json调用，你可以按照我的动态编写jquery函数的方法，然后通过startupscript注册它。这里是代码..

void loadchart() 
{ 
    DateTime strat = DateTime.Parse(DropDownList1.SelectedValue); 
    int day = strat.Day; 
    int tosub = day - 1; 
    strat = strat.AddDays((0 - tosub)); 
    DateTime edate = strat.AddMonths(1); 
    edate = edate.AddDays(-1); 
    double tot = 0; 
    string jq = "<script type=\"text/javascript\"> $(document).ready(function() { var line1 = ["; 
    while (strat <= edate) 
    { 
      string x = strat.ToString("dd/MMM/yy"); 
      double y = getregularorderamount(strat); 
      tot += y; 
      jq += "['"+x+"', "+y.ToString()+"],"; 
      strat = strat.AddDays(1); 
    } 
    jq = jq.Substring(0, jq.Length - 1); 
    jq += @"]; 
     var plot1 = $.jqplot('chart1', [line1], { 
     animate: true,"; 
    jq += "title: 'Total Order Amount For The Month Of - " + DateTime.Parse(DropDownList1.SelectedValue).ToString("MMMM-yyyy") + " = &#x20B9;" + tot.ToString() + "',"; 
     jq += @"  axes: { 
       xaxis: { 
        renderer: $.jqplot.DateAxisRenderer, 
        tickOptions: { 
         formatString: '%b&nbsp;%#d' 
        } 
       }, 
       yaxis: { 
         min:0, 
        tickOptions: { 
         formatString: '&#x20B9;%.0f' 
        } 
       } 
      }, 
      highlighter: { 
       show: true, 
       sizeAdjust: 7.5, 
       formatString: 'On date: %s, Total sale amount: %s' 
      }, 
      cursor: { 
       show: false 
      } 
     }); 
    });"; 
    jq+="</script>"; 
    ScriptManager.RegisterStartupScript(this, this.GetType(), "bgh", jq, false);

希望这种肮脏的方法有所帮助。

来源

2013-04-15 11:00:19 Ratna

thnx ratna我会试试 – DividesByZero 2013-04-15 19:23:26

你也可以使用文字控制而不是register.startupscript。 – Ratna 2013-04-18 05:03:44

集成jQuery插件和数据库

回答

相关问题