2013-04-08 73 views
1

這個插件對靜態值工作正常。但我想使用數據庫中的值。這是一個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幫忙。我會馬上給你我的賞金。我只想要一種方法來做到這一點

+3

[鏈接](http://stackoverflow.com/questions/15871794/jquery-plugin-to-integrate-with-database):兩個幾乎相同的問題從不同的人在幾分鐘內彼此:發生了什麼? – 2013-04-08 06:16:29

回答

0

您需要發送另一個AJAX請求到服務器和服務器腳本以從數據庫中獲取值並返回到您的AJAX方法。然後你應該將這些值傳遞給你的模塊來構建圖表。

+0

人們幫助我.i開始這個賞金,因爲我真的需要這樣的事情發生。我有很大的壓力來完成this.im沒有得到代碼。因爲我很新。 – DividesByZero 2013-04-13 17:54:46

+0

阿德里亞諾我只有9個小時給我150分的賞金。請在這之前回答它,以便我可以給你那些積分 – DividesByZero 2013-04-20 06:07:08

1

這很難解釋,但在這裏我們使用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,大概更復雜,這同樣只是一個解釋,你可以如何從數據庫中的數據並插入你的圖表...請嘗試把你的問題!

+0

對不起阿德里亞諾,但我不能讓你適當。我很安靜新this.but仍然我正在盡我所能瞭解this.it將gr8,如果只有你可以使它更容易理解我的例子 – DividesByZero 2013-04-12 18:53:15

+0

我試過你的code.but似乎我不能夠了解如何做它可以發佈webmethod的代碼 – DividesByZero 2013-04-13 09:16:13

+0

@DividesByZero對於'WebMethod'屬性,使用'[System.Web。 Services.WebMethod]',或者使用System.Web.Services;'添加到類文件的頂部。 – Jesse 2013-04-13 17:33:25

1

如果你不想做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); 

希望這種骯髒的方法有所幫助。

+0

thnx ratna我會試試 – DividesByZero 2013-04-15 19:23:26

+1

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