Создавайте диаграмму при каждом нажатии кнопки - PullRequest
Новая
       9

Создавайте диаграмму при каждом нажатии кнопки

0 голосов
/ 23 января 2019

Я использую библиотеку canvasJs для создания диаграммы из результата JSON.

Все работает нормально, но он показывает только 1 график, когда я меняю ссылку api, он удаляет старый график и показывает новый график.

Я хочу, чтобы каждый раз, когда я нажимал кнопку «Создать», он создавал еще одну диаграмму, а не удалял старую диаграмму, и я хотел бы иметь кнопку для удаления этой диаграммы, когда захочу.

Может ли кто-нибудь мне помочь? Вот мой код: 

<body>
<!--This is my form for input like api link, type of chart to draw-->
    <div class = "login-block">
        <form id="form1" style="display: block">

            <b>Link: </b><input type="text" id="link" name="apilink"><br>
            <br>

            <b>Chart Type:</b>
            <label class="custom-select">
                <select id="chartType">
                    <option value="pie">Pie Chart</option>
                    <option value="column">Column Chart</option>
                    <option value="bar">Bar Chart</option>
                </select>
            </label>
            <br><br>

            <!--This is the button to draw chart-->
            <div class ="wrapper">
                <button type="button" id="submit" onClick="drawChart(); saveInput();">Create</button>
                <br><br>
            </div>
        </form>
    </div>


    <div id="chartContainer" style="height: 360px; width: 60%;"></div>

    <!--This is script to draw chart-->
    <script type="text/javascript">
    function drawChart(){ 
        $(document).ready(function() {

            var dataPointsA = []
            var text = document.getElementById('chartType')
            var strChart = text.options[text.selectedIndex].value

            $.ajax({
                type: 'GET',
                url: document.getElementById('link').value,
                dataType: 'json',
                success: function(field) {
                    for (var i = 0; i < field.length; i++) {
                        dataPointsA.push({
                        label: field[i].name,
                        y: field[i].value
                        });
                    }

            var chart = new CanvasJS.Chart("chartContainer", {
            title: {
                text: "Activiti Report"
            },

                data: [{
                    type: strChart,
                    name: "chart",
                    dataPoints: dataPointsA
                }]
            });

            chart.render();
                }
            });
        })
    }
    }
    </script>
</body>

...