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

Question

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

use*_*137 5 javascript arrays graph scatter-plot chart.js

我编写了以下代码：

<!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>

Run Code Online (Sandbox Code Playgroud)

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

此致

Answer 1

tim*_*ton 4

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

data: storage

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，3 月前
查看次数：	5924 次
最近记录：	7 年，3 月前