[英]How Do I use postProcess in Amcharts
我的代码通过调用 ajax post api 调用使用带有 postProcess 的 Amcharts。 它在 console.log 中给了我响应,但它不会从响应中创建图表。
我正在尝试这样做,但我不明白我做错了什么。
请检查我的代码并告诉我,或者我可以通过其他方式实现这一点。
这是我的代码:
$.ajax({
url: "API-Link",
data: {
"api": "rs_slotcount",
"params": "7"
},
type: "post",
dataType: "json",
success: function (result) {
console.log(result)
AmCharts.makeChart("slotridecounts", {
"type": "serial",
"fixedColumnWidth": '10px',
"dataProvider": result,
postProcess: function (jsonResponse, dataLoaderConfig, chart) {
var categoryField = chart.categoryField;
var newData = [];
var groupedData = {};
Object.keys(jsonResponse).forEach(function (arrayKey) {
jsonResponse[arrayKey].forEach(function (dataItem) {
if (!groupedData[dataItem[categoryField]]) {
groupedData[dataItem[categoryField]] = {};
groupedData[dataItem[categoryField]][categoryField] =
dataItem[categoryField];
}
groupedData[dataItem[categoryField]][arrayKey] = dataItem.rideCount;
});
});
Object.keys(groupedData).forEach(function (groupedKey) {
newData.push(groupedData[groupedKey]);
});
return newData;
},
complete: function (chart) {
var valueFields = chart.graphs.map(function (graph) {
return graph.valueField;
});
var maxValue = chart.dataProvider.reduce(function (maxValue, dataItem) {
var sum = valueFields.reduce(function (sum, valueField) {
return sum + dataItem[valueField];
}, 0);
return Math.max(maxValue, sum);
}, Number.MIN_VALUE);
chart.valueAxes.forEach(function (valueAxis) {
valueAxis.maximum = maxValue;
valueAxis.strictMinMax = true;
});
chart.validateData();
},
legend: {
horizontalGap: 10,
maxColumns: 1,
position: "right",
useGraphSettings: true,
markerSize: 10,
position: "top"
},
valueAxes: [{
gridColor: "#FFFFFF",
gridAlpha: 0.2,
dashLength: 0
}],
gridAboveGraphs: true,
startDuration: 1,
valueAxes: [{
stackType: "regular",
axisAlpha: 0.3,
gridAlpha: 0,
minimum: 0,
maximum: 100,
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: "Driver",
type: "column",
color: "#000000",
valueField: "driver_data",
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: "Passenger",
type: "column",
color: "#000000",
valueField: "passenger_data",
fixedColumnWidth: 25
}
],
chartCursor: {
categoryBalloonEnabled: false,
cursorAlpha: 0,
zoomable: true
},
categoryField: "slot",
categoryAxis: {
gridPosition: "start",
gridAlpha: 0,
tickPosition: "start",
tickLength: 20,
labelRotation: 80,
labelFunction: function (valueText, dataItem, categoryAxis) {
if (valueText.length < 3) {
return valueText;
} else {
return valueText.replace(/(00|30)$/, ":$1");
}
}
}
});
}
});
Ajax 响应
{
"driver_data": [
{
"slot": 0,
"rideCount": 0
},
{
"slot": 30,
"rideCount": 0
},
{
"slot": 100,
"rideCount": 0
}
],
"passenger_data": [
{
"slot": 0,
"rideCount": 0
},
{
"slot": 30,
"rideCount": 0
},
{
"slot": 100,
"rideCount": 0
}
]
}
var obj = { "driver_data": [{ "slot": 0, "rideCount": 98 }, { "slot": 30, "rideCount": 75 }, { "slot": 100, "rideCount": 0 }], "passenger_data": [{ "slot": 0, "rideCount": 33 }, { "slot": 30, "rideCount": 56 }, { "slot": 100, "rideCount": 37 }] } let { driver_data, passenger_data } = obj; const output = Array.from({ length: driver_data.length }, (_, i) => { return { Slot: driver_data[i].slot, driver_data: driver_data[i].rideCount, passenger_data: passenger_data[i].rideCount } }) AmCharts.makeChart("chartdiv", { "type": "serial", "fixedColumnWidth": '10px', "dataProvider": output, "hideCredits": true, postProcess: function(jsonResponse, dataLoaderConfig, chart) { var categoryField = chart.categoryField; //get the chart's category field var newData = []; //final data output var groupedData = {}; //stores the grouped data as a map before converting to an array //iterate through each array in your JSON response and pull out every //slot and rideCount value into a separate object, grouped by slot value Object.keys(jsonResponse).forEach(function(arrayKey) { //put each slot/rideCount into an object/map item based on slot value jsonResponse[arrayKey].forEach(function(dataItem) { if (!groupedData[dataItem[categoryField]]) { groupedData[dataItem[categoryField]] = {}; groupedData[dataItem[categoryField]][categoryField] = dataItem[categoryField]; } groupedData[dataItem[categoryField]][arrayKey] = dataItem.rideCount; }); }); //go through groupedData mapping and convert back into an array Object.keys(groupedData).forEach(function(groupedKey) { newData.push(groupedData[groupedKey]); }); return newData; }, complete: function(chart) { //get valueFields var valueFields = chart.graphs.map(function(graph) { return graph.valueField; }); //find the maximum stack in each category var maxValue = chart.dataProvider.reduce(function(maxValue, dataItem) { var sum = valueFields.reduce(function(sum, valueField) { return sum + dataItem[valueField]; }, 0); return Math.max(maxValue, sum); }, Number.MIN_VALUE); //update each value axis' maximum and set strictMinMax to true chart.valueAxes.forEach(function(valueAxis) { valueAxis.maximum = maxValue; valueAxis.strictMinMax = true; }); //update chart chart.validateData(); }, legend: { horizontalGap: 10, maxColumns: 1, position: "right", useGraphSettings: true, markerSize: 10, position: "top" }, valueAxes: [{ gridColor: "#FFFFFF", gridAlpha: 0.2, dashLength: 0 }], gridAboveGraphs: true, startDuration: 1, valueAxes: [{ stackType: "regular", axisAlpha: 0.3, gridAlpha: 0, minimum: 0, maximum: 100, 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: "Driver", type: "column", color: "#000000", valueField: "driver_data", 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: "Passenger", type: "column", color: "#000000", valueField: "passenger_data", fixedColumnWidth: 25 } ], chartCursor: { categoryBalloonEnabled: false, cursorAlpha: 0, zoomable: true }, categoryField: "Slot", categoryAxis: { gridPosition: "start", gridAlpha: 0, tickPosition: "start", tickLength: 20, labelRotation: 80, labelFunction: function(valueText, dataItem, categoryAxis) { if (valueText.length < 3) { return valueText; } else { return valueText.replace(/(00|30)$/, ":$1"); } } } });
#chartdiv { #chartdiv { width: 100%; height: 500px; font-size: 11px; } width: 100%; height: 500px; font-size: 11px; } .amcharts-graph-graph2 .amcharts-graph-stroke { stroke-dasharray: 4px 5px; stroke-linejoin: round; stroke-linecap: round; -webkit-animation: am-moving-dashes 1s linear infinite; animation: am-moving-dashes 1s linear infinite; } @-webkit-keyframes am-moving-dashes { 100% { stroke-dashoffset: -28px; } } @keyframes am-moving-dashes { 100% { stroke-dashoffset: -28px; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="http://www.amcharts.com/lib/3/amcharts.js"></script> <script src="http://www.amcharts.com/lib/3/serial.js"></script> <div id="chartdiv"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.