ZingChart 문자열 대신 숫자로 표시되는 X 축 레이블

ZingChart 라이브러리를 사용하여 API 호출의 결과를 그래프로 나타냅니다. 차트 데이터 객체의 "값"필드에 대한 일반 배열을 전달하면 모든 것이 잘 동작합니다. I는 (titleSet가 정규 자바 스크립트 객체이다) Object.keys(titleSet) 만든 배열 전달할 때, 그래프 표시는 다음과 같이 볼 수 있듯이ZingChart 문자열 대신 숫자로 표시되는 X 축 레이블

Example Chart

은 X 축이 이제 숫자 표지 문자열 배열 대신 하지만 정상적인 배열로 전달하는 대 Object.keys(titleSet) 결과를 인쇄 할 때, 그들은 모두 콘솔에서 동일한 것으로 나타납니다. 아무도 내가 뭘 잘못하고 있는지 알아낼 수 있습니까?

//List of movies inputted by the user 
var movieList = []; 
var movieSet = {}; 

var IMDBData = { 
    "values": [], 
    "text": "IMDB", 
}; 
var metascoreData = { 
    "values": [], 
    "text": "Metascore" 
}; 
var RTMData = { 
    "values": [], 
    "text": "Rotten Tomatoes Meter" 
}; 
var RTUData = { 
    "values": [], 
    "text": "Rotten Tomatoes User" 
}; 

var chartData = { 
    "type":"bar", 
    "legend":{ 
    "adjust-layout": true 
    }, 
    "plotarea": { 
    "adjust-layout":true 
    }, 
    "plot":{ 
    "stacked": true, 
    "border-radius": "1px", 
    "tooltip": { 
     "text": "Rated %v by %plot-text" 
    }, 
    "animation":{ 
     "effect":"11", 
     "method":"3", 
     "sequence":"ANIMATION_BY_PLOT_AND_NODE", 
     "speed":10 
    } 
    }, 
    "scale-x": { 
    "label":{ /* Scale Title */ 
     "text":"Movie Title", 
    }, 
    "values": Object.keys(movieSet) /* Needs to be list of movie titles */ 
    }, 
    "scale-y": { 
    "label":{ /* Scale Title */ 
     "text":"Total Score", 
    } 
    }, 
    "series":[metascoreData, IMDBData, RTUData, RTMData] 
}; 


var callback = function(data) 
{ 
    var resp = JSON.parse(data); 

    movieSet[resp.Title] = true; 

    //Render 
    zingchart.render({ 
    id:'chartDiv', 
    data:chartData, 
    }); 
};

출처

2016-08-14 pomtree

일반적으로 그래프 구성을 게시하기 전후에 매우 유용합니다. 좀 더 굳은 답변을 얻으려면 코드를 게시하십시오. – nardecky

내 답변을 편집하여 내 구성을 포함 시켰습니다. – pomtree

전체 공개, 저는 ZingChart 팀원입니다.

질문을 업데이트 해 주셔서 감사합니다. 문제는 변수 을 변수 chartData 앞에 정의한 것입니다. 페이지를 파싱 할 때 위에서 아래로 변수 chartData을 만들 때 빈 객체에 Object.keys ({})를 실행합니다. 나중에 설정에 직접 할당해야합니다. chartData['scale-x']['values'] = Object.keys(moviSet).

var callback = function(data) 
{ 
    var resp = JSON.parse(data); 

    movieSet[resp.Title] = true; 

    //Render 
    zingchart.render({ 
    id:'chartDiv', 
    data:chartData, 
    }); 
};

위의 코드에도 문제가 있습니다. 이 API를 호출 할 때마다 차트에서 render를 호출하는 것처럼 보입니다. 하나의 초기 zingchart.render()을 가지고 있어야하며 그 다음에 우리의 API을 사용하십시오. 나는 완전히 새로운 JSON 패킷 또는 modify 메소드를 대체하기 때문에 setdata 메소드를 제안 할 것이다.

데이터 처리 방법에 대한 몇 가지 가정을하고 있습니다. 당신이 데모에 발견하는 경우에 관계없이, 다음 데모

var movieValues = {}; 
 

 
var myConfig = { 
 
    \t type: "bar", 
 
    \t scaleX:{ 
 
    \t values:[] 
 
    \t }, 
 
\t series : [ 
 
\t \t { 
 
\t \t \t values : [35,42,67,89,25,34,67,85] 
 
\t \t } 
 
\t ] 
 
}; 
 

 
zingchart.render({ 
 
\t id : 'myChart', 
 
\t data : myConfig, 
 
\t height: 300, 
 
\t width: '100%' 
 
}); 
 

 
var callback = function(data) { 
 
    movieValues[data.title] = true; 
 
    myConfig.scaleX.values = Object.keys(movieValues); 
 
    zingchart.exec('myChart', 'setdata', { 
 
    data:myConfig 
 
    }) 
 
} 
 

 
var index = 0; 
 
var movieNamesFromDB = ['Sausage Party', 'Animal House', 'Hot Rod', 'Blazing Saddles']; 
 
setInterval(function() { 
 
    if (index < 4) { 
 
    callback({title:movieNamesFromDB[index++]}); 
 
    } 
 
},1000)

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t <!--Assets will be injected here on compile. Use the assets button above--> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t \t <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/"; 
 
</script> 
 
\t <!--Inject End--> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id='myChart'></div> 
 
\t </body> 
 
</html>

을 확인 scaleX.values의 길이는 그래프에 표시되는 노드 수를 결정합니다. values을 labels으로 변경하면 이러한 일이 발생하지 않습니다.

출처

2016-08-15 23:52:00 nardecky

그건 내 문제를 해결. 도움과 조언을 주셔서 감사합니다, 이것은 ZingCharts를 사용하여 처음입니다 :) – pomtree

ZingChart 문자열 대신 숫자로 표시되는 X 축 레이블

답변

관련 문제