JSON 문자열에서 검도 UI 차트를 생성하는 방법

Question

내 솔루션의 백엔드에서 JSON을 생성하는 일부 차트가 있습니다. 나는 결과를 그대로 취하고 다음을 수행하면됩니다.

$("#myDiv").kendoChart(/* my generated JSON pasted right here */); 

잘 작동합니다. 그러나 그것은 물론 역동적이지 않습니다. 페이지에 다른 데이터를 반환하는 큰 객체가 있고 일부 데이터는 페이지에 다른 차트를 만드는 데 필요한 JSON을 나타내는 문자열입니다.

차트를 성공적으로 생성하는 실제 JSON 객체에 JSON 문자열을 가져 오는 방법을 알아낼 수 없습니다. 나는 수많은 조합을 시도했다 :

JSON.parse 
JSON.stringify 

를 사용할 수 없음. 관련 fiddle, 주에서

: 당신은 경고 팝업 말 "잘못된 문자"를 얻을 것이다는 첫 번째 차트 나는 내가 돌아올 결과를 가져다 바로 코드에 붙여 "인라인"입니다 볼 수 있습니다. 훌륭하게 작동합니다. 두 번째 차트는 동일한 데이터이지만,이를 수행 할 수 있는지를 알기 위해 변수에 넣었습니다. 마지막 하나는 내가 성취하려고하는 것입니다. JSON 데이터 문자열을 보유하는 컨트롤이 있습니다. 그 문자열을 읽고 변환하여 세 번째 차트를 생성하고 싶습니다.

도움을 주셔서 감사합니다.

Answer 1

는 JSON을 구문 분석하기 위해 제대로 속성이 있어야한다 :

<div id="chartDiv" stringToParse='{"foo":"bar"}'></div> 

그런 다음 당신은 그냥 또한

JSON.parse($("#chartDiv").attr('chartString')) 

를 호출 할 필요가, 내가하지 새로운 Date()를 당신처럼 속성에 던질 수 있다고 생각해.

모든 필드뿐만 아니라 인용해야한다는 @OniBai에서 일부 초기의 도움으로 fiddle

Answer 2

문제는 JSON 문자열 구문 분석에서 이 올바르지 않기 때문에 문자열 JSON을 구문 분석 할 때 값을 따옴표로 묶을 필요가 있습니다.

귀하의 {series:[{type:'column',aggregate:'count',field:... 실제로 {'series':[{'type':'column','aggregate':'count','field':...

편집과 같아야 그런 KendoUI 당신이 그것을가 입력하는 말을하지 않았기 때문에 그것을 구문 분석하는 방법을 알고하지 않는 date 정의에있는 두 번째 문제가있다 . 모델에 date 필드의 문자열을 정의하고 유형을 지정해야합니다.

예 :

{"series":[{"type":"column","aggregate":"count","field":"date","categoryField":"date"}],"categoryAxis":{"baseUnit":"weeks","majorGridLines":{"visible":false}},"valueAxis":{"min":0,"majorUnit":1,"line":{"visible":false}},"dataSource":{"data":[{"value":0,"date":"2015-01-26T23:00:00.000Z"},{"value":0,"date":"2015-01-27T23:00:00.000Z"},{"value":2,"date":"2015-01-28T23:00:00.000Z"},{"value":1,"date":"2015-01-29T23:00:00.000Z"},{"value":0,"date":"2015-01-30T23:00:00.000Z"},{"value":0,"date":"2015-01-31T23:00:00.000Z"},{"value":0,"date":"2015-02-01T23:00:00.000Z"}]}}` 

을하지만 당신은 dataSource 정의 "schema":{"model":{"fields":{"date":{"type":"date"}}}}에 포함 할 경우이된다 :이 문자열은 작동하지 않습니다

{"series":[{"type":"column","aggregate":"count","field":"date","categoryField":"date"}],"categoryAxis":{"baseUnit":"weeks","majorGridLines":{"visible":false}},"valueAxis":{"min":0,"majorUnit":1,"line":{"visible":false}},"dataSource":{"data":[{"value":0,"date":"2015-01-26T23:00:00.000Z"},{"value":0,"date":"2015-01-27T23:00:00.000Z"},{"value":2,"date":"2015-01-28T23:00:00.000Z"},{"value":1,"date":"2015-01-29T23:00:00.000Z"},{"value":0,"date":"2015-01-30T23:00:00.000Z"},{"value":0,"date":"2015-01-31T23:00:00.000Z"},{"value":0,"date":"2015-02-01T23:00:00.000Z"}],"schema":{"model":{"fields":{"date":{"type":"date"}}}}}} 

을하고 그것을 잘 작동합니다.

여기 JSFiddle를 참조하십시오 http://jsfiddle.net/OnaBai/9z1w759m/9/

Answer 3

좋아 참조, 그 경로 아래로 계속했다. 잘못된 문자 메시지가 계속 표시됩니다.

new Date("2015/01/30") 

잘못된 문자 메시지가 줄어들지 만 여전히 작동하지 않는 것 같습니다. 입력 필드로 가져 오기 위해 필자는 필드와 문자열 값을 작은 따옴표로 묶어야했습니다. 그런 다음, 올바르게 구문 분석하기 위해 나는 다음을 수행했다 : (문자열에 전 세계적으로 g ==) 작은 따옴표를 받아 따옴표로 대체

JSON.parse($("#hdnTest").val().replace(/\'/g, "\""); 

합니다. 그것은 Updated Fiddle에서 볼 수 있듯이 효과가있었습니다. < - 솔루션

다행히도 실제 프로젝트에서는 이전 WCF 서비스를 통해 문자열을 반환해야합니다. .replace 호출을 저장하면서 문자열 내에 \ "를 넣을 수 있습니다.