Google 파이 차트가 브라우저에 표시되지 않습니다.

외부 자바 스크립트 파일에서 drawChart 함수를 호출하려고합니다. 컴파일 할 때 아무 것도 화면에 표시되지 않습니다. 디버깅 중에 오류가 없으므로이 문제를 확인할 수 없습니다.Google 파이 차트가 브라우저에 표시되지 않습니다.

js 함수의 this for 루프는 객체의 변수에 액세스 할 수 있습니까? 나는 그 오류가 어딘가에 있다고 생각한다. 나는 명확한 해설을 게시했다.

for (var i = 0; i < dataValues.length; i++) { 
    data.addRow([dataValues[i].name, dataValues[i].number]); 
}

Default.aspx를

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 

    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript">google.load("visualization", "1", { packages: ["corechart"] }); </script> 
    <script type="text/javascript" src="Test.js"></script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <script type="text/javascript" src="Test.js"></script> 
     <input type="button" onclick="drawChart('<%=getJsonObj()%>')" value="Draw Pie Chart" /> 
     <div id="piechart" style="width: 900px; height: 500px;"></div> 
    </div> 
    </form> 
</body> 
</html>

하여 default.aspx.cs

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.Script.Serialization; 

public partial class _Default : System.Web.UI.Page 
{ 

    protected void Page_Load(object sender, EventArgs e) 
    { 

    } 

    public string getJsonObj() 
    { 
     List<Item> data = new List<Item>(); 
     data.Add(new Item("AAA", 10)); 
     data.Add(new Item("BBB", 20)); 
     data.Add(new Item("CCC", 30)); 

     JavaScriptSerializer jss = new JavaScriptSerializer(); 
     string json = jss.Serialize(data); 
     return json; 
    } 
} 

public class Item 
{ 
    public string name = ""; 
    public int number = 0; 

    public Item(string iName, int iNumber) 
    { 
     name = iName; 
     number = iNumber; 
    } 
}

Test.js는

function drawChart(jsonObj) { 

    var dataValues = eval(jsonObj); 
    var data = new google.visualization.DataTable(dataValues); 
    data.addColumn('string', 'NAME'); 
    data.addColumn('number', 'NUMBER'); 

    for (var i = 0; i < dataValues.length; i++) { 
     data.addRow([dataValues[i].name, dataValues[i].number]); 
    } 

    var options = { 'title': 'Pie Chart Example' }; 

    var chart = new google.visualization.PieChart(document.getElementById('piechart')); 
    chart.draw(data, options); 
}

누군가는이 코드를 테스트하고 문제를 식별 할 수 있습니다. 감사합니다.

출처

2014-11-25 user2307236

당신이 당신의 코드에 대한 구체적인 질문을하고 있는지 확인하십시오. 스택 오버플로는 다른 사람들을 코딩하지 않고 코드 작성을 돕는 것입니다. –

이 줄은 렌더링 된 소스에서 잘못된

<input type="button" onclick="drawChart('<%=getJsonObj()%>')" value="Draw Pie Chart" />

봐, 당신은 JavaScriptSerializer에서 따옴표의 보트 부하가있는 것을 볼 수있다. 이것에

변경을 :

<input type="button" onclick='drawChart(<%= getJsonObj() %>)' value="Draw Pie Chart" />

그런 다음 모든 따옴표는 두 개의 작은 따옴표 안에 중첩됩니다

출처

2014-11-25 22:27:36

감사합니다. 문제가 해결되었습니다. – user2307236

콜백을 잊어 버린 것 같습니다.

<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
</script>

출처

2014-11-25 22:25:00 javapadawan

단추를 통해 메서드를 호출하므로 콜백을 추가 할 필요가 없습니다. – user2307236

Google 파이 차트가 브라우저에 표시되지 않습니다.

답변

관련 문제