2017-09-11 16 views
1

SQL 데이터베이스에서 동적 데이터로 C3 차트를 채우려고합니다. 내가 언제 자바 스크립트 내가 pageload에 다음과 같은 자바 스크립트를 사용하지만 오류를 받고 있어요JSON 데이터가있는 C3 차트

[{"y":"5","item1":"Lion Wharf"},{"y":"31","item1":"Millbrook Park P2"},{"y":"84","item1":"Pinfield Meadows"}] 

다음 JSON 문자열 생산에 의해 호출

 $.ajax({ 
      type: "POST", 
      url: "additions.aspx/GetPiechartData", 
      data: "{}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      async: "true", 
      cache: "false", 
      success: function (result) { 
       OnSuccess(result.d); 
      }, 
      error: function (xhr, status, error) { 
       alert(error); 
      } 
     }); 

     function OnSuccess(response) { 
      var abc = JSON.stringify(response); 
      window.location.replace(response); 
      var chart = c3.generate({ 
       bindto: '#chart-var-project', 
       data: { 
        json: response, 
        keys: { 
         x: 'y', 
         value: ['item1'] 
        }, 
        type: 'donut' 
       }, 
       donut: { 
        title: "Approval", 
        width: 40, 
        label: { 
         show: false 
        } 
       }, 
       color: { 
        pattern: ["#ff9800", "#78c350", "#f7531f"] 
       } 
     }); 
"a.forEach을 함수 아니다"고 C# 웹 메소드가

저는 Javascript에 매우 익숙하며 여기에 포인터를 정말 고맙게 생각합니다.

고마워요!

답변

0

도넛 형 그래프의 예상 C3 형식에 맞게 json 응답의 서식을 지정해야합니다.

function OnSuccess(response) { 
    var data = {}; 
    var value = []; 
    JSON.parse(response).forEach(function(d) { 
     data[d.item1] = d.y; 
     value.push(d.item1); 
    }); 

    c3.generate({ 
       data: { 
        json: [data], 
        keys: { 
         value : value 
        }, 
        type: 'donut' 
       }, 
       donut: { 
        title: "Approval", 
        width: 40, 
        label: { 
         show: false 
        } 
       }, 
       color: { 
        pattern: ["#ff9800", "#78c350", "#f7531f"] 
       } 
     }) 
} 

서버는 일반적으로 출력 문자열, 그래서 JSON 객체로 문자열을 변환하는 JSON.parse를 사용합니다.

+0

답장을 보내 주셔서 감사합니다.하지만 여전히 같은 오류가 발생합니다 ... –

+0

'c3.generate'의'data.json' 매개 변수를 살펴보고'response'를'data'로 대체했습니다 –

+0

감사합니다. 그걸 놓쳤다. 이제는 오류가 발생하지 않습니다 ... 'item1'에 대해 100 %를 보여주는 차트 일뿐입니다. 열과 키를 정의해야합니까? –