Chartjs，使用 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 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>

我尝试了"警报"，我得到了正确的结果。但是我应该如何在数据中输入"c"呢？

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

我需要使用XHTML和JavaScript。在代码片段上有一个错误，但正如我所说，我正在使用XHTML，没有错误。

通常，我首先按照我需要的方式设置对象和数组，然后用数据填充它们。

设置它：

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

相关内容

最新更新

热门标签：