2015-07-03 80 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();