通过 ajax api json 响应在 amcharts 中绘制堆叠图表

Question

我正在使用 amcharts（堆积图），我想在堆积图中显示我从 jquery ajax api 调用 (json format) 中获得的值我已经尝试过了，但我能够做到这一点，任何人都可以对此有所了解。

检查此 fiddle 我的代码：-

[Fiddle][1] [1]: https://jsfiddle.net/JonHome/t6okfjc0/

Answer 1

chart.write() 方法接受 HTML 元素的 id 并且您正在传递 ~~class~~

变化：

~~chart.write("chartdiv");~~

至：

chart.write("rides");

来源代码：

The JS code below shows IIFE equivalent of your AJAX success. You can convert the IIFE (function (chartData){...})([...]) to AJAX success method as success: 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>

JS Fiddle: https://jsfiddle.net/5tkswdcr/5/

通过 ajax api json 响应在 amcharts 中绘制堆叠图表

Draw stacked charts in amcharts by ajax api json response

api

ajax

jquery

json

amcharts