使用chartjs绘制函数图的问题

vulvrdjw 于 2023-04-20 发布在 Chart.js

关注(0)|答案(1)|浏览(188)

我试图用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>

chart.js

来源：https://stackoverflow.com/questions/76047050/trouble-with-graphing-a-function-with-chartjs

1条答案

按热度按时间

92vpleto1#

默认情况下，对于折线图，X轴是一个“类别”轴，因此期望标签为字符串。数字的字符串表示是您正在设置的值。
按如下所示更改X轴配置，这将使其固定：

scales: {
    y: {
      beginAtZero: true,
    },
    x:{
      type: 'linear', // <-- add this one
      beginAtZero : true, // <-- axis option, not ticks one
      ticks:{
        //maxTicksLimit : 1
      }
    }
  }

还要注意的是，beginAtZero选项是一个轴选项，而不是一个刻度，因此您应该将其移动到更高的级别。

展开查看全部

赞(0）回复(0）举报 2023-04-20

我来回答

使用chartjs绘制函数图的问题

1条答案

相关问题

热门标签

最新问答