Javascript 图表js 2.8-如何使条形图以相同的速度增长？

请，我需要一些帮助，以便在我的图表画布中显示投票最终结果时悬念一些

条形图相对于其值具有相同的持续时间速度，如何设置图表中每个条形图的持续时间速度

第1步36%时4巴

第二步：48%时为3巴

最后一步60%时为1巴

这是我的图表

这是我的chartjs代码

        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: {
                animation:{
                    duration : 6000,
                },
                scales: {
                    yAxes: [{
                        gridLines: {
                            show: false,
                            display:false,
                            drawBorder: false,
                            lineWidth: 0,
                            drawOnChartArea: false
                        },
                        ticks: {
                            beginAtZero: true,
                            display: false,
                            maxTicksLimit: 5,
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            show: false,
                            lineWidth: 0,
                            display:false,
                            drawBorder: false,
                            drawOnChartArea: false,
                        },
                        ticks: {
                            show: false,
                            display:false,
                        }
                    }]
                }
            }
        });

---

我不知道是否有更好的方法，但我能想到的最简单的方法是根据我们的需要更新数据集

最初，我们可以保持所有数据元素相等，然后根据需要逐渐更改它们

下面是一个我设法编写的简单解决方案

var canvas=document.getElementById（'myChart'）；
var数据点=[65,59,30,81,56,55,40]；
var chartData=[]；
chartData.length=数据点.length；
chartData.fill（数据点1）；
var doNotOverwrite=[dataPoints.indexOf（chartData[0]）；
风险值数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
标签：“我的第一个数据集”，
背景颜色：“rgba（255,99132,0.2）”，
边框颜色：“rgba（255,99132,1）”，
边界宽度：2，
hoverBackgroundColor:“rgba（255,99132,0.4）”，
hoverBorderColor:“rgba（255,99132,1）”，
数据：图表数据，
}
]
};
var myBarChart=Chart.Bar（画布{
数据：数据，
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的，
suggestedMax:Math.max（…数据点）
}
}]
}
}
});
var指数=0；
var interval=setInterval（（）=>{
索引++；
var num=最小值（数据点、索引）；
追加数组（num）；
doNotOverwrite.push（dataPoints.indexOf（chartData[0]）；
myBarChart.update（）；
if（index==dataPoints.length）{
间隔时间；
}
}, 1000);
函数数组（num）{
for（设i=0；i

我写得很匆忙，所以代码可能有一些问题。（具有重复元素的数组将无法工作，因为我正在使用索引）

您还需要更新您的选项以使其正常工作

我知道这不是最漂亮的解决方案，但它很管用。：）

var canvas = document.getElementById('myChart');
var dataPoints = [65, 59, 30, 81, 56, 55, 40];
var chartData = [];
chartData.length = dataPoints.length;
chartData.fill(nthSmallest(dataPoints, 1));
var doNotOverwrite = [dataPoints.indexOf(chartData[0])];

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 2,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: chartData,
        }
    ]
};

var myBarChart = Chart.Bar(canvas,{
    data:data,
  options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true,
                suggestedMax: Math.max(...dataPoints)
            }
        }]
    }
}
});

var index = 0;

var interval = setInterval(()=> {
  index++;

  var num = nthSmallest(dataPoints, index);
  appendArray(num);
  doNotOverwrite.push(dataPoints.indexOf(chartData[0]));
  myBarChart.update();
  if(index == dataPoints.length) {
    clearInterval(interval);
  }
}, 1000);

function appendArray(num) {
            for(let i = 0; i< chartData.length; i++) {
        if(!doNotOverwrite.includes(i)) {
            chartData[i] = num;
        }
      }
}

function nthSmallest(numbers, n) {
        numbers = JSON.parse(JSON.stringify(numbers));
    var sorted = numbers.sort(function (a, b) {
        return b - a;
    });
    return sorted[sorted.length - n];
}