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

Question

请，在我的chartjs画布上显示民意调查最终结果时，我需要一些帮助来做个悬念。

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

1. 第一步4格处于36％压力
2. 第二步3个小节，占48％
3. 最后一步1巴为60％

这是我的图表

这是我的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,
                        }
                    }]
                }
            }
        });

Answer 1

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

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

这是我设法编写link的简单解决方案。

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

我很着急地编写了它，因此代码可能存在一些问题。 （包含重复元素的数组将无法使用，因为我正在使用索引）。

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

我知道这不是最漂亮的解决方案，但是嘿，它可行。 ：）