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

【问题标题】：creating a chart.js scatter graph with variables for data使用数据变量创建 chart.js 散点图
【发布时间】：2020-05-30 00:20:53
【问题描述】：

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

我无法弄清楚为什么不包含数据，任何帮助将不胜感激

【问题讨论】：

标签： javascript chart.js scatter-plot

【解决方案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 找到图表的工作副本。

【讨论】：