检索json数据后,Javascript不会填充图表

时间:2016-07-07 02:39:08

标签: javascript asp.net vb.net chart.js

我有一个//create FusionTable-instance $table = new Google_Service_Fusiontables_Table; //set table-name $table->setName('myTableName'); //set required option isExportable $table->setIsExportable('true'); //set column(s) $table->setColumns(array( new Google_Service_Fusiontables_Column(array('type'=>'STRING', 'name'=>'columnName')), new Google_Service_Fusiontables_Column(array('type'=>'NUMBER', 'name'=>'otherName')) ) ); //insert the table //$service is a Google_Service_Fusiontables-instance $result = $service->table->insert($table); //display Id of the new FusionTable echo $result->tableId; 来处理图表div<div id="LineSumbalance"></div>来关键参数,textbox来解雇。

button

我编写了一个代码来查询数据库中的数据:

<asp:TextBox ID="txtDate" CssClass="form-control" runat="server"></asp:TextBox>
<asp:TextBox ID="txtSearchTerm" runat="server" Width="200px" class="form-control" placeholder="Terminal Number" spellcheck="false"></asp:TextBox>
<asp:Button ID="btnSearchTerm" runat="server" Text="Search" class="btn  btn-primary" />

以上代码运作正常。

问题出在<WebMethod()> Public Shared Function GetChart(ByVal Tdate As String, ByVal Term As String) As List(Of Object) Dim BizFunc As New BizFunction.UtilFormat Dim chartData As New List(Of Object)() Dim TabName As String = "TA" & Tdate Dim TodayDate As String = BizFunc.Date2YYMM(Today.Date) Dim labels As New List(Of String)() If Tdate = Mid(TodayDate, 1, 4) Then TabName = "(select * from " & TabName & " union all select * from TA" & TodayDate & ") TA " End If Dim query As String = "WITH t1 AS (SELECT dt,DATEADD(MONTH,DATEDIFF(MONTH,'1900-01-01',dt),'1900-01-01') AS firstInMonth,DATEADD(DAY,-1,DATEADD(MONTH,DATEDIFF(MONTH,'1900-01-01',dt)+1,'1900-01-01')) AS lastInMonth,amount " & " FROM(SELECT CONVERT(DATE, tran_date) AS dt,COUNT(*) AS AMOUNT FROM " & TabName & " WHERE TERM Like '%" & Term.PadRight(16, " ") & "%' and (TRANS = '05' or TRANS = '06') GROUP BY TRAN_DATE) AS st " & "Group BY dt, amount), " & "Calendar " & " AS (SELECT DISTINCT DATEADD(DAY, c.number,t1.firstInMonth) AS d FROM t1 JOIN master..spt_values AS c On type = 'P' AND DATEADD(DAY,c.number,t1.firstInMonth) BETWEEN t1.firstInMonth AND t1.lastInMonth) " & " Select DatePart(dd, d) Date, Case When amount Is NULL Then 0 Else amount End As amount FROM calendar As c LEFT JOIN t1 On t1.dt = c.d;" Dim dtbal As DataTable = GetData(query) Dim series1 As New List(Of Integer)() For Each row As DataRow In dtbal.Rows labels.Add(Convert.ToString(row("Date"))) Next chartData.Add(labels) For Each row As DataRow In dtbal.Rows series1.Add(Convert.ToInt32(row("AMOUNT"))) Next chartData.Add(series1) Return chartData End Function

Javascript

我尝试在每一行都发出警报,并且卡在$(function () { $("[id*=btnSearchTerm]").click(function () { LoadChart(); }); }); function LoadChart() { var tdate = $("[id*=txtdate]").val(); var term = $("[id*=txtSearchTerm]").val(); $.ajax({ type: "POST", url: "MonthlyBalancing.aspx/GetChart", data: "{TDate: '" + tdate + "', term: '" + term + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (r) { var labels = r.d[0]; var series1 = r.d[1]; var data = { labels: labels, datasets: [ { label: "Dataset1", backgroundColor: "rgba(38, 185, 154, 0.31)", borderColor: "rgba(38, 185, 154, 0.7)", pointBorderColor: "rgba(38, 185, 154, 0.7)", pointBackgroundColor: "rgba(38, 185, 154, 0.7)", pointHoverBackgroundColor: "#fff", pointHoverBorderColor: "rgba(220,220,220,1)", pointBorderWidth: 1, data: series1 }] }; $("#LineSumbalance").html(""); var canvas = document.createElement('canvas'); $("#LineSumbalance")[0].appendChild(canvas); //Fix for IE 8 if ($.browser.msie && $.browser.version == "8.0") { G_vmlCanvasManager.initElement(canvas); } var ctx = canvas.getContext('2d'); var lineChart = new Chart(ctx).Line(data, { bezierCurve: false }); }, failure: function (response) { alert('There was an error.'); } }); } 上。即使失败,它也不会执行任何操作。

1 个答案:

答案 0 :(得分:0)

命名至少存在一个问题:您的控件为<asp:TextBox ID="txtDate",但您调用的$("[id*=txtdate]").val();似乎也需要txtDate(使用大写字母D)。

关于ajax - 您需要调试该函数以确保它在每一步中获得的内容。在必要的地方添加debugger;alert();并运行代码。例如,添加

...
success: function (r) {
   alert(r);
   var labels = r.d[0];
...

并查看是否会定义r