morris 차트가 업데이트되지 않습니다.

Question

막대 그래프 morris.js을 업데이트하는 데 문제가 있습니다.

페이지가로드, 내가 잘 작동하고 멋진 차트를 만들고 다음과 같은 기능이있는 경우 :

이

$(document).ready(function() { 
    if($('.projectViewTotal').length) { 
     chart = Morris.Bar({ 
      element: 'LastIncome', 
      data: [ 
       { y: '04-02-2014', a: 3 }, 
       { y: '04-03-2014', a: 10 }, 
       { y: '04-04-2014', a: 5 }, 
       { y: '04-05-2014', a: 17 }, 
       { y: '04-06-2014', a: 6 } 
      ], 
      xkey: 'y', 
      ykeys: ['a'], 
      labels: ['Visits'] 
     }); 
    }; 
}); 

그런 다음 몇 가지 사용자 작업 후 나는 아약스를 통해 새로운 데이터를 얻을 내 차트를 업데이트 할을하지만, 안타깝게도 업데이트 후에는 데이터가 차트에 표시되지 않고 레이블은 단지 undefined입니다. 콘솔을 통해 오류도 발생하지 않습니다.

다음이 같은 차트 업데이트 : 예를 들어,이 데이터 구조가 내가 아약스 대답을 CONSOLE.LOG

var response = $.parseJSON(content); 
console.log(response); 
chart.setData(response.jsString); 

:

Object {jsString: "[ { y: '2014', a: 3505},{ y: '2013', a: 0},{ y: '2012', a: 0},{ y: '2011', a: 0} ]", sort: "getLastIncome"}

을하지만, 내가 말했듯 정의되지 않은 레이블과 내부에 데이터가없는 차트를 가져옵니다.

chart.setData() 너비의 하드 코딩 된 샘플 데이터를 사용하면 모든 것이 올바르게 작동합니다. 그래서 내가 response.jsString에서 얻은 문자열이 있어야합니다.하지만 이미 콜백에 $.parseJSON을 사용 했으므로 문제가 어디에 있는지 정말로 알 수 없습니다.

어디에서 오류가 발생 했습니까? 고맙습니다! JTG 제안처럼

, 내가 대신 string의 numeric array을 만들기 위해, 내 서버 측 코드를 변경했다

$ausgabeJS = "[ "; 
$amount = count($data); 
$i = 1; 
foreach ($data as $key => $value) { 
    if($i < $amount) { 
     $ausgabeJS .= "{ y: '".$key."', a: ".$value."},"; 
    } else { 
     $ausgabeJS .= "{ y: '".$key."', a: ".$value."}"; 
    } 
    $i++; 
} 
$ausgabeJS .= " ]"; 
$responseArray = array(
    "jsString" => $ausgabeJS, 
    "sort" => $method 
); 
$result = json_encode($responseArray); 

해결책 :

여기 내 서버 측 PHP 코드입니다. 여기에 업데이트 된 코드입니다 :

$data_array = array(); 
foreach ($data as $key => $value) { 
    $ar = array(
     "y" => $key, 
     "a" => $value 
    ); 
    array_push($data_array, $ar); 
} 
$responseArray = array(
    "jsString" => $data_array, 
    "sort" => $method 
); 
$result = json_encode($responseArray); 

Answer 1

귀하의 response.jsString가 setData 기능 허용 매개 변수가 아닌 문자열, 여전히 (이 해시 배열의 배열이어야한다).

불행하게도 당신의 키 (JSON에 대한 요구 사항 인) 문자열을하지 않기 때문에, 당신은 JSON이 jsString 문자열을 구문 분석 할 수 있도록 서버 측과 같이, 당신의 키 문자열을

{jsString: '[{"y": "2014", "a":2505}, {"y": "2014", "a":2505}, {"y": "2014", "a":2505}]', sort: "getLastIncome"} 

그리고 좋아요 그래서 우리는 두 가지 옵션이 있습니다 : 당신은

chart.setData($.parseJSON(response.jsString)); 

가 그

편집을 작동하지 않을 경우 알려줘 그래프에 데이터를 추가 할 수 있어야합니다.

첫째, 나는이 작동합니다 확실하지 않다

$data_return = []; 
foreach ($data as $key => $value) { 
    array_push($data_return, array("y" => $key, "a" => $value)); 
} 

$responseArray = array(
    "jsString" => $data_return, 
    "sort" => $method 
); 
$result = json_encode($responseArray); 

로 PHP 코드를 바꿀 수, 당신이 분석되어야 할 것이다 문자열을 구축하지 않기 때문에이 시도 가치가 있다고 생각 두번.

하지만 문제가 해결되지 않을 경우, 당신은 항상 내 원래의 제안에 갈 수있는 등 같은 문자열로 자신을 당신의 해시 배열의 키를 설정 :

foreach ($data as $key => $value) { 
    if($i < $amount) { 
     $ausgabeJS .= "{ 'y': '".$key."', 'a': ".$value."},"; 
    } else { 
     $ausgabeJS .= "{ 'y': '".$key."', 'a': ".$value."}"; 
    } 
    $i++; 
} 

통지에게 여분의 단일 문자열 따옴표를 y 주위에 및 a. 이제 당신이 만들고있는 문자열이 적절한 JSON입니다. 이제 당신은 이것을 할 수 있어야합니다.

var response = $.parseJSON(content); 
console.log(response); 
chart.setData($parseJSON(response.jsString));