2017-04-20 127 views
0

我试图使用AJAX将标签和数据加载到ChartJS中。ChartJS AJAX加载标签和数据

使用

{ 
"trendingLineChartLabels": "['JAN','FEB','MAR']", 
"trendingLineChartData": "[1, 5, 2]" 
} 

jQuery代码

$.getJSON("test.json", function(response) { 
    console.log(JSON.stringify(response.trendingLineChartLabels)); 
    var trendingLineChartData = { 
     labels : response.trendingLineChartLabels, 
     datasets : [ 
      { 
       label: "First dataset", 
       fillColor : "rgba(128, 222, 234, 0.6)", 
       strokeColor : "#ffffff", 
       pointColor : "#00bcd4", 
       pointStrokeColor : "#ffffff", 
       pointHighlightFill : "#ffffff", 
       pointHighlightStroke : "#ffffff", 
       data: response.trendingLineChartData 
      } 
     ] 
    }, trendingLineChart = document.getElementById("trending-line-chart").getContext("2d"); 
    window.trendingLineChart = new Chart(trendingLineChart).Line(trendingLineChartData, {scaleShowGridLines:!0,scaleGridLineColor:"rgba(255,255,255,0.4)",scaleGridLineWidth:1,scaleShowHorizontalLines:!0,scaleShowVerticalLines:!1,bezierCurve:!0,bezierCurveTension:.4,pointDot:!0,pointDotRadius:5,pointDotStrokeWidth:2,pointHitDetectionRadius:20,datasetStroke:!0,datasetStrokeWidth:3,datasetFill:!0,animationSteps:15,animationEasing:"easeOutQuart",tooltipTitleFontFamily:"'Roboto','Helvetica Neue', 'Helvetica', 'Arial', sans-serif",scaleFontSize:12,scaleFontStyle:"normal",scaleFontColor:"#fff",tooltipEvents:["mousemove","touchstart","touchmove"],tooltipFillColor:"rgba(255,255,255,0.8)",tooltipTitleFontFamily:"'Roboto','Helvetica Neue', 'Helvetica', 'Arial', sans-serif",tooltipFontSize:12,tooltipFontColor:"#000",tooltipTitleFontFamily:"'Roboto','Helvetica Neue', 'Helvetica', 'Arial', sans-serif",tooltipTitleFontSize:14,tooltipTitleFontStyle:"bold",tooltipTitleFontColor:"#000",tooltipYPadding:8,tooltipXPadding:16,tooltipCaretSize:10,tooltipCornerRadius:6,tooltipXOffset:10,responsive:!0});    
    }); 

走势应该是这样的JSON文件IM: enter image description here

但它产生这样的: enter image description here

我寻找解决方案,但没有找到任何。预先感谢您的帮助。

回答

1

JSON对象是无效的,它应该是这样的......

{ 
    "trendingLineChartLabels": ["JAN", "FEB", "MAR"], 
    "trendingLineChartData": [1, 5, 2] 
} 
+0

非常感谢帮助 –

+0

@MichałBereszyński你是欢迎:) –

+0

接受答案 –