使用 Chart.Js 从数组绘制散点图

Question

我写了下面的代码：

<!DOCTYPE html>
<html lang = "en">
<head> 
    <meta charset = "UTF-8">
    <meta name = viewport" content ="width=device-width, intial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content = "ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <link rel ="stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <title>My Chart.js</title>

</head>
<body> 
    <div class = "container">
        <canvas id="myChart"></canvas>
    </div>
    <script>
    var c = []; 
    var randomNumber = Math.random()*190;
        function getRandomDataPoint(x){
            if (x == "x"){
                var _return
                return Math.random()*20;
            }
            else if (x == "y"){
                return Math.random()*10 + randomNumber; 
            } 
            else{

            } 
        }
        var xPoints = [];
        var yPoints = [];
        var storage = [];
        for(var i=0;i<100;i++)
        { 
            xPoints[i] = Math.random()*20;
            yPoints[i] = Math.random()*10 + randomNumber;
            x = xPoints[i];
            y = yPoints[i];
            var json = {x: x, y: y};
            storage.push(json); 
        }

        var concatenatedArray = xPoints.concat(yPoints);



        let myChart = document.getElementById('myChart');//.getContext('2d');
        Chart.defaults.global.defaultColor = '#000000'; 

        let massPopChart = new Chart(myChart, {
            type: 'scatter',
                data: {
                    datasets: [{label: 'Data Set', data: [storage]}],
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                max: 200,
                                min: 0,
                                beginAtZero:true
                            },
                        }]

                    }
                }       
        });

    </script>
</body>
</html>

我想让这段代码做的是获取 100 个随机数据点并使用代码中描述的 for 循环绘制它们。问题是当前的代码集确实创建了轴，但是似乎没有数据被绘制出来。感谢您的帮助。

此致

Answer 1

问题在于如何将数据值传递给 Chart.js 这一行：

datasets: [{label: 'Data Set', data: [storage]}],

具体来说，data 应该是 array of objects。因为您添加了方括号 ([])，所以您传递的是 'array of array of objects'.

只需删除括号即可解决问题：

data: storage

使用 Chart.Js 从数组绘制散点图

Using Chart.Js to plot a scatter plot from an Array

javascript

arrays

graph

scatter-plot

chart.js