将jQuery插件与数据库集成

Question

该插件可以很好地处理静态值。 但是我想使用数据库中的值。 这是一个3D图表。 我已经尝试了所有方法，但是找不到任何解决方案。 所以也要帮忙。 我尝试过各种东西。 搜索了所有可能解释此问题的网站。 但是到目前为止，没有任何帮助。 甚至搜索了制作此类插件的网站，但均未找到适当的文档。 对于其他想要将任何jQuery插件与其数据库集成的开发人员来说，它将是gr8。

<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，但仍然无法正常工作。 显示空白页。 我现在不知道该怎么办。

Answer 1

很难解释，但是这里我们使用高位图并从数据库中加载数据。

首先，您需要知道使用jquery将调用发送到使用JSON的Web方法。 如果您使用的是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页面，以执行未传递任何参数的方法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的，可能更复杂，这仅是对如何从数据库中获取数据并将其插入到图表中的解释...请尝试并解决您的问题！

Answer 2

如果您不想进行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);

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

Answer 3

您需要向服务器发送另一个AJAX请求，并发送服务器脚本以从DB获取值并返回到您的AJAX方法。 然后，您应该将此值传递到模块中以构建图表。