Question

在页面加载时，我有一个这样的函数：

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函数上，但它只会破坏最后一个调用的AnimateCircle。如何制作循环来销毁所有这些？或者有更好的方法，当我第二次调用该函数时，第一个图表会更新吗？

AnimateCircle功能：

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';
}

使用progressbar.js

Answer 1

我无法真正测试这段代码，所以我不能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");
    })
}

和你的AnimateCircle：

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

  // do your stuff

  return circle;
}

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

1 个答案: