как динамично изменять labels в chart js при помощи input

Question

Есть такой код js задающий график

function ewe(){
    var economic = document.getElementById('economic').getContext('2d');
    // настройки графика экономики
    economicChart = new Chart(economic,{
        type: "line",
        data:{
            labels:['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18'],
            datasets: [{
            label: 'расходы',
            data: [82,123, 167, 200,322,433,500,555,597,620,688,720,780,800,808,832,866,922],
            
            borderColor: 'rgb(65,74,91)',
            backgroundColor: 'rgba(65,74,91, .1)',
            fill: "start",
            
              },
              {
              label: 'доходы',
            data: [0,0, 0, 0,167,322,500,597,597,688,780,808,866,942,980,999,1052,1200],
            
            borderColor: 'rgb(238, 164, 31)',
            backgroundColor: 'rgba(238, 164, 31, .5)',
            fill: "start",
              },]
              
        },
    
    });
}

И я хочу что бы при помощи input type="number" код брал value этого инпута (например 7) и задавал соответственно семь labels, удалив перед этим те 18 значений и поставив например те же с 1-7. и эта итерация происходила каждый раз при смене value. Я честно искал, но нигде не нашел решения.

Answer 1

Нужно после того как вы получаете значения из input делать

const inputValue = 7; // как пример
economicChart.data.labels = Array.from({length: inputValue}, (v, k) => (k + 1).toString()) // получаем массив ["1", "2", "3", "4", "5", "6", "7"] как хотели
economicChart.update()

ссылка на API chartjs https://www.chartjs.org/docs/latest/developers/api.html#update-mode

А потом получим обновленный график

БЛОГ НА HUSL

как динамично изменять labels в chart js при помощи input

Ответы (1 шт):