Chartjs，用 For-Loop 分散

Question

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8" />  
        <title>Charts</title>
        <script src="./OurScript.js" type="text/javascript"></script>
  <style>

        </style>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

        
        
    </head> 
    <body>
      
    <canvas id="myChart1"></canvas>
        

    <script type="text/javascript">//<![CDATA[

         
    var x = new Chart(document.getElementById("myChart1"), {
    type: 'scatter',
    data: {
        datasets: [{
            label: "Test",
            data: [
{x:0,y:3},{x:1,y:4},{x:2,y:2},{x:3,y:5},{x:4,y:7},{x:5,y:5},{x:6,y:7},{x:7,y:8},{x:8,y:4},{x:9,y:4}
],
                        }]
                    },
                    options: {
                        responsive: true
                    }
                    });

        
       //]]> </script>
        
           
          

    </body>
</html>

这就是我的代码，运行良好。（我需要使用 XHTML）

我的问题是，我想对 X 和 Y 值使用 for 循环。但我不知道如何将数组放入数据中。

我试过这样的事情：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8" />  
        <title>Charts</title>
        <script src="./OurScript.js" type="text/javascript"></script>
  <style>

        </style>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

        
        
    </head> 
    <body>
      
        
        

            <canvas id="myChart1"></canvas>
        

        <script type="text/javascript">//<![CDATA[

            var xwerte = [0,1,2,3,4,5,6,7,8,9,10];
            var ywerte = [3,4,2,5,7,5,7,8,4,4];
           var c = [];
           var Ergebnis1;
           for(var i=0;i<ywerte.length;i++)
            {
            var obj ="{" + "x:" + xwerte[i] + "," + "y:" + ywerte[i] + "}";
                c.push(obj);
                
            }
           
           
           
         // alert(c);
            var x = new Chart(document.getElementById("myChart1"), {
                    type: 'scatter',
                    data: {
                        datasets: [{
                            label: "Test",
                            data: [c],
                        }]
                    },
                    options: {
                        responsive: true
                    }
                    });

        
       //]]> </script>
        
           
          

    </body>
</html>

我尝试了 "alert"，我得到了正确的结果。但是我应该如何将 "c" 放入数据中？

我想我没有看到一点（希望）错误。

我需要使用 XHTML，而且 JavaScript。在 Snippet 上有一个错误，但正如我所说，我使用的是 XHTML 并且没有错误。

Answer 1

通常我首先设置我的对象和数组，然后用数据填充它们。

设置：

var chartData = {
  datasets: [{
    label: 'Test',
    data: []
  }]
}

用数据填充它：

for (var i = 0; i < yWerte.length; i++) {
  chartData.datasets[0].data.push(
    {
      x: xWerte[i], // You don't need "xWerte", you can simply use "i" when it's always the increment
      y: yWerte[i]
    }    
  )
}

您不需要 c 来保存您的数据，您可以像我一样使用它。但是如果你想要 c 你可以将 for 循环的结果保存在空数组 c 中然后使用 chartData.datasets[0].data = c.

带实时预览的工作示例：https://jsbin.com/copiwefaza/edit?js,output

Chartjs，用 For-Loop 分散

Chartjs, scatter with For-Loop

html

javascript

xhtml

for-loop

chart.js