Javascript 删除第一次使用progressbar.js绘制的图表

在页面加载时，我有一个如下函数：

function getResults(id) {
    var url = "/users/" + id;
    $.getJSON(url, function (data) {
            var vid = data.calculated.length - 1;
            getResults(vid);
            data.survey.forEach(function (surveyData) {
                    $('#surveys').append(
                         new Option(
                             new Date(surveyData.submittedDate).toDateString(), 
                                 surveyData.id));
                }
            })
    });
}

getResults函数执行以下操作：

function getResults(vid) {
    var url = "/survey/" + vid;
    $.getJSON(url, function (data) {
        var results = data;
        AnimateCircle("circle1", results.surveyResults["first"], "A");
        AnimateCircle("circle1", results.surveyDataResults["second"], "B");
    })
}

现在，在用值填写了调查下拉列表后，当选项更改时，我再次调用getResults，其中vid不同：

$('#data').change(function () {
    var vid = $('#data').val();
    getResults(vid);
});

问题是，每次我在下拉列表中选择不同的选项时，使用AnimateCircle（）函数调用的图表都会被调用，相反，我希望删除旧的图表，并删除上面有新值的新图表

我试着打电话给circle.destroy（）；在onChange函数上，但它只销毁最后一个调用的animateCycle。 我怎么做一个循环来摧毁它们？或者有没有更好的方法，当我第二次调用函数时，第一个图表会得到更新

动画循环功能：

function AnimateCircle(container_id, animatePercentage, type) {
    var startColor = '#FC5B3F';
    var endColor = '#F18F01';
    var element = document.getElementById(container_id);
    circle = new ProgressBar.Circle(element, {
        color: startColor,
        trailColor: '#eee',
        trailWidth: 3,
        duration: 1400,
        easing: 'easeInOut',
        strokeWidth: 3,
        text: {
            value: "<h4>" + type + "</h4>" + "<h4>" + (animatePercentage) * 10 + "</h1>",
            className: 'progressbar__label'
        },
        step: function (state, circle) {
            circle.path.setAttribute('stroke', state.color);
        }
    });
    circle.animate(animatePercentage, {
        from: {
            color: startColor
        },
        to: {
            color: endColor
        }
    });
    circle.path.style.strokeLinecap = 'round';
}

函数AnimateCircle（容器id、animatePercentage、类型）{
var startColor='#FC5B3F'；
var endColor='#F18F01'；
var元素=document.getElementById（容器id）；
圆=新进度条。圆（元素{
颜色：startColor，
trailColor:“#eee”，
trailWidth:3，
持续时间：1400，
放松：“放松”，
冲程宽度：3，
正文：{
值：“+类型+”+“+”+（动画百分比）*10+”，
类名：“progressbar\uuuu标签”
},
步骤：功能（状态、循环）{
circle.path.setAttribute（'stroke'，state.color）；
}
});
圆。动画（动画百分比{
发件人：{
颜色：startColor
},
致：{
颜色：endColor
}
});
circle.path.style.strokeLinecap='round'；
}

---

使用progressbar.js

我无法真正测试这段代码，因此我不能100%确定它是否能正常工作，但我想到的是：

var first, second;

function getResults(vid) {
    var url = "/survey/" + vid;
    $.getJSON(url, function (data) {
        var results = data;
        if (first) first.destroy();
        if (second) second.destroy();

        first = AnimateCircle("circle1", results.surveyResults["first"], "A");
        second = AnimateCircle("circle1", results.surveyDataResults["second"], "B");
    })
}

至于你的动画循环：

function AnimateCircle(...) {
  ...
  var circle = new ProgressBar.Circle(element, ...);

  // do your stuff

  return circle;
}

---

animatecycle

到底做什么？我添加了这个函数。非常感谢。它使用progressbar.js绘制一个圆图。您可以尝试在

AnimateCircle

函数中返回对

circle

的引用，然后销毁以前在调用

getResults

时创建的每个实例。我尝试将circle设置为全局变量，然后销毁它。但我不知道如何把它们全部摧毁。你建议怎么做？在函数的末尾有一个返回圈，然后如何销毁每个实例？我很抱歉，如果这很简单，我是新来的。非常感谢！！！真是救命恩人！正是我要找的！非常感谢。