создание диаграммы. js точечный график с переменными для данных - PullRequest
Новая
       126

создание диаграммы. js точечный график с переменными для данных

2 голосов
/ 30 мая 2020

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

<html>

<head>
<title>Test1</title>

<script src="Chart.min.js"></script>
</head>
<body>

<button onmousedown="addData()"></button>

<script>
function addData(){
    ABC=[[1,2,1],[2,2,2],[3,3,3]];
    chart(ABC);
}



function chart(array)
{
    for (counter = 0; counter < array.length; counter++) 
    {
        var entery = {x: array[counter][0], y: array[counter][3]};
        storage.push(entery);
    }

    document.write('<canvas id="lineChart" height="200" width="450"></canvas>');    


    const chart=document.getElementById("lineChart");
    console.log(chart)
    var myChart = new Chart(chart, {
        type: 'scatter',
        data: {
            datasets: [{
                "fill":false,
                pointRadius: 10,
                label: 'Scatter Dataset',
                data: storage        
                }]

        },
        options: {
            scales: {
                xAxes: [{
                    type: 'linear',
                }]
            }
        }
    });

}
</script>



</body>
</html>

I не могу понять, почему данные не включены, любая помощь будет оценена

1 Ответ

1 голос
/ 30 мая 2020

У вас возникли проблемы с настройкой кода:

  1. Вы не определили storage массив
  2. console.log(chart) выдает ошибку, вы должны прокомментировать эту строку или удалите его
  3. Элементы в вашем массиве AB C не имеют 4 элементов (массивы имеют индекс 0, а ваш последний индекс будет 2, а не 3), поэтому эту строку var entery = {x: array[counter][0], y: array[counter][3]}; следует изменить на var entery = {x: array[counter][0], y: array[counter][2]};

Итак, ваш код должен выглядеть так: 

<html>

<head>
    <title>Test1</title>
    <script src="Chart.min.js"></script>
</head>
<body>
    <button onclick="addData();">Test</button>

    <script type="text/javascript">
        function addData(){
            ABC=[[1,2,1],[2,2,2],[3,3,3]];
            chart(ABC);
        }


        function chart(array)
        {
            var storage = [];
            for (counter = 0; counter < array.length; counter++) 
            {
                var entery = {x: array[counter][0], y: array[counter][2]};
                storage.push(entery);
            }

            document.write('<canvas id="lineChart" height="200" width="450"></canvas>');    

            const chart = document.getElementById("lineChart");
            //console.log(chart)
            var myChart = new Chart(chart, {
                type: 'scatter',
                data: {
                    datasets: [{
                        "fill":false,
                        pointRadius: 10,
                        label: 'Scatter Dataset',
                        data: storage        
                        }]
                },
                options: {
                    scales: {
                        xAxes: [{
                            type: 'linear',
                        }]
                    }
                }
            });
        }
    </script>
</body>
</html>

Также здесь вы можете найти рабочую копию диаграммы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...