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

【问题标题】：Using Chart.Js to plot a scatter plot from an Array使用 Chart.Js 从数组中绘制散点图
【发布时间】：2019-02-25 18:55:03
【问题描述】：

我写了以下代码：

<!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 循环绘制它们。问题是当前的代码集确实创建了轴，但是似乎没有绘制数据。感谢您的帮助。

最好的问候

【问题讨论】：

标签： javascript arrays graph chart.js scatter-plot

【解决方案1】：

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

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

具体来说，data 应该是 array of objects。因为您添加了方括号 ([])，所以您正在传递一个“对象数组的数组”。

删除括号即可解决问题：

data: storage

【讨论】：

谢谢蒂姆·克拉顿先生，感谢您的迅速反应，这对我很有帮助。我从 C++ 和 Java 等语言过渡到 Javascript 的最大问题是语法和对象的定义方式。幸运的是，逻辑保持不变。先生干杯！