javascript - 通过调用ajax api(json响应)创建amcharts
问题描述
我正在尝试通过调用 ajax api(以 json 格式响应)来创建 amcharts,通过调用 post api 我在 console.log 中获得所需的数据,但图表未显示。请检查代码,并建议我缺少什么。我只使用 jquery 和 HTML,如果 api 不起作用,请用东西数据解释我。
我可以通过使用 amcharts 的 dataLoader 插件来实现这一点吗?如果是,请向我解释如何使用 dataLoader 来实现。请检查我的代码并更新我如何首先通过 json 响应绘制图表。
这是我的工作代码
$(function () {
$("[id*=btnok]").click(function () {
var obj = {};
obj = $.trim($("[id*=nodays]").val());
console.log(obj)
$.ajax({
type: "POST",
"headers": {
"content-type": "application/json",
"cache-control": "no-cache"
},
url: "http://10.26.32.4/api/rating-service/rate/ridecount/days/",
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
console.log(r)
AmCharts.makeChart("rides", {
"type": "serial",
"fixedColumnWidth": '10px',
"legend": {
"horizontalGap": 10,
"maxColumns": 1,
"position": "right",
"useGraphSettings": true,
"markerSize": 10
},
"valueAxes": [{
"gridColor": "#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"valueAxes": [{
"stackType": "regular",
"axisAlpha": 0.3,
"gridAlpha": 0,
"minimum": 0,
"maximum": 50,
"gridCount": 1
}],
"graphs": [{
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillColors": "#47b012",
"lineColor": "#47b012",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Completed Rides",
"type": "column",
"color": "#000000",
"valueField": "completedTrip",
"fixedColumnWidth": 25
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillColors": "#fff138",
"lineColor": "#fff138",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Not Ended",
"type": "column",
"color": "#000000",
"valueField": "activeTrip",
"fixedColumnWidth": 25
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillColors": "#dd111b",
"lineColor": "#dd111b",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Canceled Rides",
"type": "column",
"color": "#000000",
"valueField": "cancelledTrip",
"fixedColumnWidth": 25
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "creationDate",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20,
"labelRotation": 60
}
});
}
});
return false;
});
});
解决方案
dataLoader 只支持 GET 请求,所以它不是一个选项。
我发现您的代码唯一有问题的是您没有将您的响应分配给图表的dataProvider
. 假设您的响应格式正确(对象数组):
$.ajax({
type: "POST",
"headers": {
"content-type": "application/json",
"cache-control": "no-cache"
},
url: "http://10.26.32.4/api/rating-service/rate/ridecount/days/",
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
console.log(r)
AmCharts.makeChart("rides", {
"type": "serial",
"fixedColumnWidth": '10px',
"dataProvider": r, //if your response is an array of objects, e.g. [{"completedTrip": .., "activeTrip: .., "cancelledTrip": .., "creationDate": ..}, ...]
"legend": {
"horizontalGap": 10,
"maxColumns": 1,
"position": "right",
"useGraphSettings": true,
"markerSize": 10
},
"valueAxes": [{
"gridColor": "#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"valueAxes": [{
"stackType": "regular",
"axisAlpha": 0.3,
"gridAlpha": 0,
"minimum": 0,
"maximum": 50,
"gridCount": 1
}],
"graphs": [{
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillColors": "#47b012",
"lineColor": "#47b012",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Completed Rides",
"type": "column",
"color": "#000000",
"valueField": "completedTrip",
"fixedColumnWidth": 25
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillColors": "#fff138",
"lineColor": "#fff138",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Not Ended",
"type": "column",
"color": "#000000",
"valueField": "activeTrip",
"fixedColumnWidth": 25
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillColors": "#dd111b",
"lineColor": "#dd111b",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Canceled Rides",
"type": "column",
"color": "#000000",
"valueField": "cancelledTrip",
"fixedColumnWidth": 25
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "creationDate",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20,
"labelRotation": 60
}
});
推荐阅读
- serilog - UseSerilog program.cs dotnet run 卡在构建中
- mongodb - 如何删除在 MongoDB 中某个日期之后创建的文档?
- amazon-web-services - 如何将我的 ec2 实例从 http 转换为 https?
- python - python/lxml - 在 html 中查找标签并更改它
- laravel - Laravel eloquent contitional join 与 contitions 作为传递 id
- couchbase - 如何在沙发上创建 udf
- python - Python 3:for 循环不起作用,似乎无法找出问题所在
- reactjs - 将 react js 文件转换为 tsx 文件
- python - 张量流中不规则/变化的批量大小?
- reactjs - 如何在 AWS CloudWatch 上实现 React.js 应用程序的日志记录机制