2014-06-10 77 views
0

我使用的是www.chartjs.org,該代碼完美適用於「data」屬性的硬編碼數據,它完美地顯示了labelArr,但是將chartDataArr和goalArr作爲變量傳遞出現問題。Chart JS不適用於動態數據

var chartDataArr = [110.0,70.0,30.0,130.0,100.0]; 
var goalArr = [67.9,67.9,67.9,67.9,67.9]; 
var labelArr = ["a", "b", "c", "d", "e"]; 

// this requires HTML5 canvas, <canvas id="graphContainerOne" width="400" height="200"></canvas> 
var ctx = $("#graphContainer").get(0).getContext("2d"); 
//This will get the first returned node in the jQuery collection. 

var mydata = { 
    labels: labelArr, 
    datasets: [{ 
     fillColor: "rgba(0,176,80,0.5)", 
     strokeColor: "rgba(0,176,80,1)", 
     pointColor: "rgba(0,176,80,1)", 
     pointStrokeColor: "#fff", 
     data: chartDataArr 
    }, { 
     fillColor: "rgba(0,112,192,0.5)", 
     strokeColor: "rgba(0,112,192,1)", 
     pointColor: "rgba(0,112,192,1)", 
     pointStrokeColor: "#fff", 
     data: goalArr 
    }] 
}; 

var options = { 
    bezierCurve: false 
}; 

var myNewChart = new Chart(ctx).Line(mydata, options); 
+0

問題的性質是什麼? – joews

回答

0

以下工作適合我。你使用的是最新版本的chart.js嗎?

var array = [298,287,284,282,280]; 
var labelArray = ["April","May","June","July","August"]; 

var data = { 
labels : labelArray, 
pointDotStrokeWidth : 5, 
datasets : [ 
    { 
     label: "My First dataset", 
     fillColor : "rgba(151,187,205,0.5)", 
     strokeColor : "rgba(151,187,205,1)", 
     pointColor : "rgba(151,187,205,1)", 
     pointStrokeColor : "#fff", 
     data : array 


    }, 
    { 
     label: "My First dataset", 
     fillColor: "rgba(220,220,220,0.0)", 
     strokeColor: "rgba(20, 138, 44, 1)", 
     highlightFill: "rgba(220,220,220,0.75)", 
     highlightStroke: "rgba(220,220,220,1)", 
     pointColor : "rgba(151,187,205,0)", 
     pointStrokeColor : "rgba(151,187,205,0)", 
     data: [287, 287, 287, 287, 287] 
    } 
] 
} 

var ctx = $("#weekChart").get(0).getContext("2d"); 
new Chart(ctx).Line(data);