2016-12-24 5 views
2

jquery와 javascript에 관해서는 새로운 것이지만 천천히 배우려고 노력하고 있습니다. 제 질문은, json 파일이있는 경우개체의 배열을 받아 막대 그래프에 넣어

var data= [{"tasknumber":304030, 
    "date":"2012-05-05", 
    "operator":"john doe"}, 
    {"tasknumber":23130, 
    "date":"2012-07-07", 
    "operator":"john doeeeeeeee"}, 
    {"tasknumber":233330, 
    "date":"2012-08-08", 
    "operator":"john doe"}] 

그리고 내가 온라인

을 발견 샘플 JQuery와 그래프 개요를 사용하여 다음 부품 메신저에 대한 그래서이

{"john doe":2,"john doeeeeeeee":1} 

처럼 보이는 배열을 얻기 위해 밑줄 라이브러리에서에 .countBy 적용

<!DOCTYPE HTML> 
<html> 
<head> 
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> 
<script type="text/javascript"> 

window.onload = function() { 
    var chart = new CanvasJS.Chart("chartContainer", { 
     title:{ 
      text: "My First Chart in CanvasJS"    
     }, 
     data: [    
     { 
      // Change type to "doughnut", "line", "splineArea", etc. 
      type: "column", 
      dataPoints: [ 
       { label: "apple", y: 10 }, 
       { label: "orange", y: 15 }, 
       { label: "banana", y: 25 }, 
       { label: "mango", y: 30 }, 
       { label: "grape", y: 28 } 
      ] 
     } 
     ] 
    }); 
    chart.render(); 
} 
</script> 
</head> 
<body> 
<div id="chartContainer" style="height: 300px; width: 100%;"></div> 
</body> 
</html> 

나는 코드

data: [    
     { 
      // Change type to "doughnut", "line", "splineArea", etc. 
      type: "column", 
      dataPoints: [ 
       //insert here 
      ] 
     } 
     ] 

그러나 나는 시도하고 개방 지제 누군가가 나를 위해 어떤 지침이있을 때 난 단지 빈 화면과 UNDEFINE를 얻을이 부분에서 나의 새로운 배열을 호출하는 몇 가지 방법을 시도 datapoints 내 배열을 호출하는 방법?

내 데이터는 다른 파일이라고 task.json에 그리고 난 당신의 JSON 개체가 일부 변수에 저장됩니다 말할 수 있습니다

var input=require('./task.json'); 
const _ = require(`underscore`); 
var names=_.countBy(input,'operator'); 
+0

데이터 포인터 내에서 호출하려는 배열은 무엇입니까? 'names? ' – marmeladze

+0

새로운 변수 (예 : dps)를 ** CanvasJS.chart ** 함수 외부의 배열로 선언하십시오. 그래프에 표시하려는 데이터로 해당 배열을 채 웁니다. 데이터는 CanvasJS 라이브러리에 설명 된대로 적절한 형식이어야합니다. 그런 다음 ** CanvasJS.chart ** 함수 내부에서 dataPoints에 var (dps)를 할당합니다. (예 : dataPoints : dps). – Beevk

+0

네, 내 datapoint 내에서 이름을 호출하고 싶습니다. –

답변

3

사용하여 전화 해 (예 : 인 myObject).

var myObject = {"john doe":2,"john doeeeeeeee":1}; 

JSON에서 dataPoints를 저장하고 dataPoints를 배열에 푸시 할 변수를 선언하십시오. 일단 당신이 이것을하면

var dps = []; 
for(var element in myObject) { 
    dps.push({label: element, y: myObject[element]}); 
} 

데이터 포인트 CanvasJS 차트의이 변수 (DPS)을 할당합니다.

data: [ 
    type: "column", 
    dataPoints: dps 
] 

는이 fiddle에서 동작하는 예제를 볼 수 있습니다.