Нарисуйте сложенные диаграммы в amcharts ответом ajax api json - PullRequest
Новая
       8

Нарисуйте сложенные диаграммы в amcharts ответом ajax api json

0 голосов
/ 24 августа 2018

Я использую amcharts (диаграмма с накоплением), я хочу показать значения на диаграмме с накоплением, которые я получаю при вызове jquery ajax api (json format) Я пробовал это, но я могу этого добитьсяМожет кто-нибудь, имеющий ключ к этому.

Проверьте эту скрипту для моего кода: -

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

1 Ответ

0 голосов
/ 24 августа 2018

Метод chart.write () принимает id элемента HTML, и вы передаете класс

Изменение:

chart.write ( "chartdiv");

до:

chart.write ( "едет");

Код Soruce:

Код JS ниже показывает IIFE-эквивалент вашего успеха в AJAX. Вы можете преобразовать функцию IIFE ( (chartData) {...} ) ([...]) в метод успеха AJAX как 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/

...