chart.js中用ajax,javascript - ChartJS AJAX load labels and data - Stack Overflow

Im trying to load labels and data into ChartJS using AJAX.

JSON file im using

{

"trendingLineChartLabels": "['JAN','FEB','MAR']",

"trendingLineChartData": "[1, 5, 2]"

}

jQuery code

$.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});

});

Chart should look like this:

bAcV4.jpg

But it generates like this:

eb89d.jpg

I have searched for solution but couldnt find any. Thanks in advance for any help.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值