2016-12-24 8 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"}] 

и я применил .countBy к нему из библиотеки подчеркивания, чтобы получить массив, который выглядит как этот

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

так для следующей части им с помощью графика контура образца JQuery, который я нашел в Интернете

<!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, когда я пытаюсь и открытое it.does Кто-нибудь есть какие-либо указания для меня на как вызвать мой массив в datapoints?

мои данные в другой файл с именем task.json и я должен вызвать его, используя

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

какой массив вы хотите вызвать в datapoint? 'names?' – marmeladze

+0

Объявить новую переменную (скажем, dps) как массив вне функции ** CanvasJS.chart **. Заполните этот массив данными, которые вы хотите показать на графике. Данные должны быть в соответствующем формате, как указано в библиотеке CanvasJS. Затем назначьте этот параметр var (dps) в dataPoints внутри функции ** CanvasJS.chart **. (например: dataPoints: dps). – Beevk

+0

Да, я хочу называть имена в моем потоке данных –

ответ

3

Допустим, ваш объект JSON хранится в некоторой переменной (например: MyObject).

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

Объявление переменной для хранения данных из вашего JSON и перенос данных в ваш массив.

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

После того, как вы сделали это, присвоить этой переменной (DPS) в из точек данных CanvasJS диаграммы.

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

Вы можете увидеть рабочий пример в этом fiddle.