Question

我正在使用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>

每次单击按钮时创建一个图表

0 个答案: