我试图用chartjs绘制一个函数，但遇到了一些麻烦
我不知道为什么xAxis标签有这些数字。
有没有更好的方法我应该采取？因为我认为这段代码是不好的
我怎样才能使图形的最高值出现在y轴标签上？
const ctx = document.getElementById('myChart');
const xAxis = []
for(let i = 0; i < 1 ; i=i+0.001){
xAxis.push(i)
}
const yAxis = []
for(let i = 0 ; i < xAxis.length;i++){
yAxis.push(1225*Math.pow(xAxis[i],48)*Math.pow((1-xAxis[i]),2))
}
new Chart(ctx, {
type: 'line',
data: {
labels: xAxis,
datasets: [{
label: 'F(x)',
data: yAxis,
borderWidth: 1,
fill: false,
pointRadius: 0
}]
},
options: {
scales: {
y: {
beginAtZero: true,
},
x:{
ticks:{
beginAtZero : true,
//maxTicksLimit : 1
}
}
}
}
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="SRstyle.css">
<title>Success Rate</title>
</head>
<body>
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="SRscript.js"></script>
</body>
</html>
1条答案
按热度按时间92vpleto1#
默认情况下，对于折线图，X轴是一个“类别”轴，因此期望标签为字符串。数字的字符串表示是您正在设置的值。
按如下所示更改X轴配置，这将使其固定：
还要注意的是，
beginAtZero选项是一个轴选项，而不是一个刻度，因此您应该将其移动到更高的级别。