使用数据变量创建 chart.js 散点图

Question

我正在编写一个最终会根据用户输入生成图表的程序。所以我创建了一个概念证明，应该单击一个按钮并制作一个 chart.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>

我不明白为什么没有包含数据任何帮助将不胜感激

Answer 1

您在设置代码时遇到一些问题：

你还没有定义storage数组
console.log(chart) 抛出错误，您必须注释掉该行或将其删除
您的 ABC 数组中的元素没有 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>

另外 here 您可以找到该图表的工作副本。

使用数据变量创建 chart.js 散点图

creating a chart.js scatter graph with variables for data

javascript

scatter-plot

chart.js