Не строится диаграмма с использование Chart.js. Почему?

166

28 января 2021, 02:30

let button = document.querySelector('button'); 
 
 
button.onclick = function(){ 
    let wordsLength = []; 
    let answer = prompt('Введи предложение'); 
    answer = answer.replace(/[^\w\s]/gi, ""); 
    let words = answer.split(' '); 
     
    for (let i = 0; i < answer.length - 1; i++){ 
        let word = words[i]; 
        wordsLength.push(word.length); 
    } 
    var ctx = document.getElementById('chart'); 
    var myChart = new Chart(ctx, { 
        type: 'bar', 
        data: { 
            labels: words, 
            datasets: [{ 
                label: 'Количество букв', 
                data: wordsLength, 
                backgroundColor: [ 
                    'rgba(255, 99, 132, 0.2)' 
                ], 
                borderColor: [ 
                    'rgba(255, 99, 132, 1)' 
                ], 
                borderWidth: 1 
            }] 
        }, 
        options: { 
            scales: { 
                yAxes: [{ 
                    ticks: { 
                        beginAtZero: true 
                    } 
                }] 
            } 
        } 
    }); 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Document</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script> 
</head> 
<body> 
    <button> 
        Запуск 
    </button> 
    <canvas id='chart'></canvas> 
    <legend for="canvas"></legend> 
 
     
    <script src="main.js"></script> 
</body> 
</html>

Answer 1

Обратите внимание на консоль браузера

"TypeError: word is undefined"

Найдите место, где вы используете эту переменную. Обратите внимание на сам цикл. Изначально, вы разбиваете строку на слова, а потом делаете цикл по длине строки, и берете слова по этим индексам.

Если вы хотите в массив wordsLength записать длины слов, то надо и цикл делать по массиву words, либо просто ограничится такой записью:

let wordsLength = words.map(v => v.length);

let answer = '123 1 asd qq'; //prompt('Введи предложение'); 
let words  = answer.replace(/[^\w\s]/gi, "").split(' '); 
 
let wordsLength = words.map(v => v.length); 
 
 
var ctx = document.getElementById('chart'); 
var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
        labels: words, 
        datasets: [{ 
            label: 'Количество букв', 
            data: wordsLength, 
            backgroundColor: [ 
                'rgba(255, 99, 132, 0.2)' 
            ], 
            borderColor: [ 
                'rgba(255, 99, 132, 1)' 
            ], 
            borderWidth: 1 
        }] 
    }, 
    options: { 
        scales: { 
            yAxes: [{ 
                ticks: { 
                    beginAtZero: true 
                } 
            }] 
        } 
    } 
});

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script> 
 
 
<canvas id='chart'></canvas> 
<legend for="canvas"></legend>