2015-07-03 108 views
0

我想用一些來自REST風格的web服務的數據填充折線圖(CanvasJS)。CanvasJS圖未填充

JSON數組來我看起來像:

[ 
[ 
    { 
     "periodo": "2014-03-03", 
     "quantidade": 2 
    }, 
    { 
     "periodo": "2014-09-13", 
     "quantidade": 1 
    }, 
    { 
     "periodo": "2015-06-23", 
     "quantidade": 6 
    }, 
    { 
     "periodo": "2015-06-24", 
     "quantidade": 2 
    }, 
    { 
     "periodo": "2015-06-25", 
     "quantidade": 1 
    } 
], 
[ 
    { 
     "periodo": "2015-06-23", 
     "quantidade": 1 
    } 
] 
] 

即兩個陣列(我想在兩行變換圖)。在我的jQuery代碼,我加入了一些禮節這個JSON數組,像這樣:

var chartdata = []; 

jQuery.each(data, function(i, val) {  
    var chart = {}; 
    chart["type"] =   "spline"; 
    chart["showInLegend"] = true; 
    chart["dataPoints"] = val; 
    chartdata.push(chart); 
}); 

最後我打電話抽屜:

var chart = new CanvasJS.Chart("chartContainer",{ 
      animationEnabled: true, 
      zoomEnabled: true, 
      data: chartdata, 
      legend: { 
       cursor: "pointer", 
       itemclick: function (e) { 
        if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { 
         e.dataSeries.visible = false; 
        } else { 
         e.dataSeries.visible = true; 
       } 
       chart.render(); 
       } 
      } 
     }); 

但圖不被繪製。也沒有錯誤。我比較了我的最終JSON數組,它與CanvasJS example

相差無幾?

回答

0

它看起來像你的chart.render()只在圖例對象中。 嘗試在創建圖表對象後放置它(見下文)。

我希望這會有所幫助。 墊子

var chart = new CanvasJS.Chart("chartContainer",{ 
    animationEnabled: true, 
    zoomEnabled: true, 
    data: chartdata, 
    legend: { 
     cursor: "pointer", 
     itemclick: function (e) { 
      if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { 
       e.dataSeries.visible = false; 
      } else { 
       e.dataSeries.visible = true; 
      } 
      chart.render(); 
     } 
    } 
}); 
chart.render();