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

问题描述 投票:0回答:1

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

检查这个小提琴我的代码: -

[小提琴] [1] [1]:https://jsfiddle.net/JonHome/t6okfjc0/

jquery json ajax api amcharts
1个回答
0
投票

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>

JS小提琴:https://jsfiddle.net/5tkswdcr/5/

© www.soinside.com 2019 - 2025. All rights reserved.