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。因为您已添加了方括号（[]），所以您传递的是“对象数组”。

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

data: storage

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

1 个答案: