Как сделать петлю в холсте js, чтобы сделать диаграмму нескольких серий?

Я пытаюсь сделать диаграмму нескольких серий, используя Canvasjs. Моя проблема в том, что я не могу сделать цикл внутри dataPoints, поэтому я все жестко запрограммировал. Есть ли способ, которым я могу использовать циклы?Как сделать петлю в холсте js, чтобы сделать диаграмму нескольких серий?

Вот данные Json:

[{"name":"Grace","label":"A","y":0},{"name":"Grace","label":"B","y":3},{"name":"Grace","label":"C","y":0},{"name":"Grace","label":"D","y":0},{"name":"Mirriam","label":"A","y":0},{"name":"Mirriam","label":"B","y":5},{"name":"Mirriam","label":"C","y":2},{"name":"Mirriam","label":"D","y":0},{"name":"Mar","label":"A","y":0},{"name":"Mar","label":"B","y":5},{"name":"Mar","label":"C","y":2},{"name":"Mar","label":"D","y":0},{"name":"Jejomar","label":"A","y":0},{"name":"Jejomar","label":"B","y":5},{"name":"Jejomar","label":"C","y":2},{"name":"Jejomar","label":"D","y":0}]

Вот мой код:

<script type='text/javascript'> 
$(document).ready(function() { 

$.getJSON('data.php', function (result) { 
    var chart1 = new CanvasJS.Chart('Container', { 
    title:{ 
     text: 'Results of Survey', 
    }, 
    data: [ 

    { 
     type: 'column', 

     dataPoints: [ 
     { label:"A", y: result[0].y}, 
     { label:"B", y: result[1].y}, 
     { label:"C", y: result[2].y}, 
     { label:"D", y: result[3].y}, 
     ] 

    },{ 
     type: 'column', 
     dataPoints: [ 
     { label:"A", y: result[4].y}, 
     { label:"B", y: result[5].y}, 
     { label:"C", y: result[6].y}, 
     { label:"D", y: result[7].y}, 
     ] 

    },{ 
     type: 'column', 
     dataPoints: [ 
     { label:"A", y: result[8].y}, 
     { label:"B", y: result[9].y}, 
     { label:"C", y: result[10].y}, 
     { label:"D", y: result[11].y}, 
     ] 
    },{ 
     type: 'column', 
     dataPoints: [ 
     { label:"A", y: result[12].y}, 
     { label:"B", y: result[13].y}, 
     { label:"C", y: result[14].y}, 
     { label:"D", y: result[15].y}, 
     ] 
    } 

    ] 




}); 

chart1.render(); 

}); 


}); 

</script> 
</head> 
<body> 

<div id="Container" style="width: 800px; height: 380px;"></div> 

</body> 
</html>

источник

2016-02-27 Tamara Trinity

Это должно работать:

var persons = {} 
json.forEach(d => { 
    if (!(d.name in persons)) persons[d.name] = [] 
    persons[d.name].push({label: d.label, y: d.y}) 
}) 

var data = Object.keys(persons).map(name => { 
    return {type: 'column', dataPoints: persons[name]} 
})

Сначала мы берем все точки данных и группируем их по имени. Затем мы строим окончательный массив данных путем сопоставления имен людей.

источник

2016-02-27 10:47:11

Как сделать петлю в холсте js, чтобы сделать диаграмму нескольких серий?

ответ

Смежные вопросы