Grafik.js için dinamik olarak veri kümeleri nasıl oluşturulur?

Question

Grafik.js kitaplığında dinamik olarak birden fazla veri kümesine sahip Çizgi grafiğini oluşturmak istiyorum.

Verileri dinamik olarak atayabiliyorum. Fakat veri kümelerini dinamik olarak kendim oluşturmak istiyorum. Ben aşağıdaki bağlantıyı

How to add the elements dynamically from the html table for chart.js

gördü ve burada

var datasetValue = []; 
for (var j = 0; j < count; j++) { 
datasetValue[j] = [ 
{ 
fillColor: 'rgba(220,220,220,0.5)', 
strokeColor :'rgba(220,220,220,1)' , 
title :'2013', 
data : [Math.round(Math.random() * 100),Math.round(Math.random() * 100)-10] 
}] 
} 

var mydata = { 
datasets : datasetValue 
} 

sayısı değeri 3'tür

gibi çalıştı ve ben grafikte 3 satır görüntülemek istiyorum ve sayım değeri değişir alacak. Çizginin rengi ve başlığı aynı olacak olsa bile, önce satırı görüntülemek istiyorum. Bunu çözdüğümde bunu dinamik olarak değiştirebilirim.

ben ilk veri kümelerinin verileri ama onun gösteren tanımsız göstermelidir

alert("Datasets:"+mydata.datasets[0].data); 

gibi verilere erişmek için çalıştı.

ancak aşağıda durumda

var mydata1 = { 
labels : ["January","February","March","April","May","June","July"], 
datasets : [ 
    { 
     fillColor : "rgba(220,220,220,0.5)", 
     strokeColor : "rgba(220,220,220,1)", 
     data : [95,53,99,73,27,82,40], 
     title : "2014" 
    }, 
    { 
     fillColor : "rgba(151,187,205,0.5)", 
     strokeColor : "rgba(151,187,205,1)", 
     data : [35,43,59,31,50,66,55], 
     title : "2013" 
    } 
] 
} 

alert("Datasets:"+mydata1.datasets[0].data); 

elimden ilk veri kümesinin verilerini elde edebilir. Birisi bana çözümü önerebilir misiniz?

Answer 1

Aşağıdaki çözüm gibi bir şey aradığınızı düşünüyorum. http://jsfiddle.net/5m63232a/

var datasetValue = []; 
var count = 10; 
for (var j=0; j<count; j++) { 
    datasetValue[j] = { 
     fillColor: 'rgba(220,220,220,0.5)', 
     strokeColor :'rgba(220,220,220,1)', 
     title :'2013', 
     data : [Math.round(Math.random() * 100),Math.round(Math.random() * 100)-10] 
    } 
} 
var mydata = { 
    datasets : datasetValue 
} 
alert("Datasets: "+mydata.datasets[0].data); 

Answer 2

şekilde getirmesini oluşturma json formt gibi:

labels : ["January","February","March","April","May","June","July"], 
     datasets : [ 
      { 
       label: "My First dataset", 
       fillColor : "rgba(220,220,220,0.2)", 
       strokeColor : "rgba(220,220,220,1)", 
       pointColor : "rgba(220,220,220,1)", 
       pointStrokeColor : "#fff", 
       pointHighlightFill : "#fff", 
       pointHighlightStroke : "rgba(220,220,220,1)", 
       data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] 
      }, 
      { 
       label: "My Second dataset", 
       fillColor : "rgba(151,187,205,0.2)", 
       strokeColor : "rgba(151,187,205,1)", 
       pointColor : "rgba(151,187,205,1)", 
       pointStrokeColor : "#fff", 
       pointHighlightFill : "#fff", 
       pointHighlightStroke : "rgba(151,187,205,1)", 
       data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] 
      } 
     ] 

Sonra

var j = []; 
$.ajax({ 
    type: 'GET', 
    url: 'http://' + window.location.host.toString() + "/path", 
    dataType: 'json', 
    success: function (data) { 
     j = data; 
    }, 
    async: false 
}); 
var chartData = { 
    labels: j.labels, 
    datasets: j.datasets 
}; 
window.onload = function() { 
    var ctx = document.getElementById("canvas").getContext("2d"); 
    window.myLine = new Chart(ctx).Line(chartData, { 
     responsive: true, 
     animation: true, 
     tooltipFillColor: "rgba(0,0,0,0.8)", 
     multiTooltipTemplate: "<%= datasetLabel %> - <%=value %>" 
    }); 
}