Dynamiczne tworzenie zestawów danych dla wykresu liniowego chart.js?

Question

Chcę utworzyć dynamicznie wykres liniowy z wieloma zestawami danych w bibliotece chart.js.

Potrafię dynamicznie przypisać dane. Ale chcę dynamicznie tworzyć zbiory danych. Widziałem poniższego linku

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

i starał się jak

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 
} 

tutaj wartość licznika jest 3 i chcę, aby wyświetlić 3 linie na wykresie, a wartość licznika będzie się różnić. Mimo że kolor i tytuł linii wykresu będą takie same, chcę najpierw wyświetlić linię i mogę ją zmienić jako dynamiczną, kiedy ją rozwiązałem.

Próbowałem dostęp do danych jak

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

Należy pokazać dane z pierwszych zbiorów danych, ale jego pokazując niezdefiniowane.

ale w poniższym przypadku

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); 

mogę w stanie uzyskać dane z pierwszego zestawu danych. Czy możesz prosić, by ktoś dał mi rozwiązanie?

Answer 1

Myślę, że szukasz czegoś takiego jak poniższe rozwiązanie. 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

Tworzenie usługi sprowadzić json formt jak:

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()] 
      } 
     ] 

Następnie dodać następujące kodu javascript

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 %>" 
    }); 
}