Диаграмма 2.8 - Как заставить бары расти с той же скоростью? - PullRequest
Новая
       12

Диаграмма 2.8 - Как заставить бары расти с той же скоростью?

0 голосов
/ 04 октября 2019

Пожалуйста, мне нужна некоторая помощь, чтобы сделать некоторую задержку при отображении окончательных результатов опроса на моем холсте chartjs.

Бары имеют одинаковую скорость продолжительности относительно их значения, как установить продолжительность для каждого барана графике?

  1. 1-й шаг 4 бара при 36%
  2. 2-й шаг 3 бара при 48%
  3. Финал последнего шага 1 при 60%

Это мой график

enter image description here

Это код моего чарджиса 

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

1 Ответ

0 голосов
/ 05 октября 2019

Я не знаю, есть ли лучший способ сделать это, но самое простое, что я могу придумать, это обновить набор данных в соответствии с нашими потребностями.

Изначально мы можем сохранить все элементы данныхравных, а затем постепенно изменить их, как мы хотим.

Вот простое решение, которое мне удалось закодировать 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];
}

Я написал его в спешке, поэтому могут возникнуть некоторые проблемы с кодом. (Массив с повторяющимися элементами не будет работать, поскольку я использую индекс).

Вам также потребуется обновить параметры, чтобы он работал правильно.

Я знаю, что это не самое красивое решение,но эй, это работает. :)

...