我正在使用amcharts
(堆积图表),我想显示堆积图表中的值,我从jquery ajax api
调用(json format
)我已经尝试过但我能够实现这一点,任何人都可以对此有所了解。
检查这个小提琴我的代码: -
[小提琴] [1] [1]:https://jsfiddle.net/JonHome/t6okfjc0/
chart.write()方法接受HTML元素的id,并且您正在传递 类
更改:
chart.write( “chartdiv”);
至:
chart.write( “游乐设施”);
源代码:
下面的JS代码显示了IIFE等同于您的AJAX成功。您可以将IIFE(函数(chartData){...})([...])转换为AJAX成功方法,因为成功:function(chartData){...}
(function (chartData) {
AmCharts.ready(function () {
/* SERIAL CHART */
chart = new AmCharts.AmSerialChart();
/* chart.type = serial, */
chart.dataProvider = chartData;
chart.categoryField = "creationDate";
chart.startDuration = 1;
chart.plotAreaBorderColor = "#DADADA";
chart.plotAreaBorderAlpha = 1; /* this single line makes the chart a bar chart */
chart.rotate = false;
/* AXES */
/* Category Axis*/
var categoryAxis = chart.categoryAxis;
categoryAxis.gridPosition = "start";
categoryAxis.gridAlpha = 0.1;
categoryAxis.axisAlpha = 0;
/* Value Axis */
var valueAxis = new AmCharts.ValueAxis();
valueAxis.stackType;
valueAxis.axisAlpha = 0;
valueAxis.gridAlpha = 0.1;
valueAxis.position = "top";
chart.addValueAxis(valueAxis);
/* GRAPHS */
/* first graph */
var graph1 = new AmCharts.AmGraph();
graph1.type = "column";
graph1.title = "active Trips";
graph1.valueField = "activeTrip";
graph1.balloonText = "active Trips:[[value]]";
graph1.lineAlpha = 0;
graph1.fillColors = "#ADD981";
graph1.fillAlphas = 1;
chart.addGraph(graph1);
/* second graph */
var graph2 = new AmCharts.AmGraph();
graph2.type = "column";
graph2.title = "cancelled Trips";
graph2.valueField = "cancelledTrip";
graph2.balloonText = "cancelled Trips:[[value]]";
graph2.lineAlpha = 0;
graph2.fillColors = "#81acd9";
graph2.fillAlphas = 1;
chart.addGraph(graph2);
/* Third graph */
var graph3 = new AmCharts.AmGraph();
graph3.type = "column";
graph3.title = "completed Trips";
graph3.valueField = "completedTrip";
graph3.balloonText = "completed Trips:[[value]]";
graph3.lineAlpha = 0;
graph3.fillColors = "#9972C1";
graph3.fillAlphas = 1;
chart.addGraph(graph3);
/* LEGEND */
var legend = new AmCharts.AmLegend();
chart.addLegend(legend);
/* WRITE */
chart.write("rides");
});
})([{
"creationDate": "23/08/18",
"activeTrip": 2,
"cancelledTrip": 3,
"completedTrip": 3
}, {
"creationDate": "22/08/18",
"activeTrip": 2,
"cancelledTrip": 1,
"completedTrip": 10
}])
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
</head>
<body>
<div id="rides" class="chartdiv" style="width:400px;height:400px;"></div>
</body>
</html>