Charts.js 缩放 yaxes ticks min max 不起作用

Question

我有一个 HTML 页面，其中的 charts.js 图表有效。我正在尝试设置图表的最小值和最大值，但无法设置最小值和最大值。我搜索了不同的帖子，但他们说的都是一样的，我很确定我已经在这样做了...

> scales: {
>               yAxes: [{
>                 ticks: {
>                   min: -100,
>                   max: 100
>                 }
>               }]
>             }

我就是想不通哪里出了问题。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
        <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc/dist/chartjs-plugin-datalabels.min.js"></script>
        <title>daily</title>
    </head>
    <body>
    <canvas class='temp_chart' id='temp_chart'>
    </body>
<script>
function square_data(chart){
    var c = document.createElement("canvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FFA500";
    ctx.rect(145, 70, 15, 15);
    ctx.fill()
    ctx.fillStyle = "#fff";
    ctx.fillText(chart.dataset.data[chart.dataIndex], 147,82, 10);

    ctx.stroke();
    return c
}
const time_of_day = ['Morning', 'Day', 'Evening', 'Night']
var temperatures = [15, 18, 4, -6]
var ctx = document.getElementById('temp_chart').getContext('2d')
     window.chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: time_of_day,
        datasets: [{
          fill:false,
          label: 'Cantidad Estudiantes',
          data: temperatures,
          borderColor: [
            'rgba(0, 0, 0, 1)',

          ],
          borderWidth: 3
        }]
      },
      options: {
        plugins: {
            legend: {
            display: false,
         },
          datalabels: {
              anchor: 'start',
              align: '-45',
              clamp: true,
              color: "orange",
          }
        },
        elements:{
                "point":{"pointStyle":square_data},
            }
    },
    scales: {
          yAxes: [{
            ticks: {
              min: -100,
              max: 100
            }
          }]
        }
      });
</script>

Answer 1

那是因为您在 v3 中使用了 v2 语法，对于所有更改，请阅读 migration guide 并且您在选项对象之外定义了比例配置。

在 v3 中，所有比例尺都是一个对象，其中对象的键是比例尺的 ID

要使数据标签插件正常工作，您还需要注册它，请参阅脚本块中的第一行。

最后一件事不要包含 2 个主要版本的库，出错的可能性很大

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
  <title>daily</title>
</head>

<body>
  <canvas class='temp_chart' id='temp_chart'>
  </body>
  <script>
    Chart.register(ChartDataLabels); // Added this line
    
    function square_data(chart) {
      var c = document.createElement("canvas");
      var ctx = c.getContext("2d");
      ctx.fillStyle = "#FFA500";
      ctx.rect(145, 70, 15, 15);
      ctx.fill()
      ctx.fillStyle = "#fff";
      ctx.fillText(chart.dataset.data[chart.dataIndex], 147, 82, 10);

      ctx.stroke();
      return c
    }
    const time_of_day = ['Morning', 'Day', 'Evening', 'Night']
    var temperatures = [15, 18, 4, -6]
    var ctx = document.getElementById('temp_chart').getContext('2d')
    window.chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: time_of_day,
        datasets: [{
          fill: false,
          label: 'Cantidad Estudiantes',
          data: temperatures,
          borderColor: [
            'rgba(0, 0, 0, 1)',

          ],
          borderWidth: 3
        }]
      },
      options: {
        // Changed this block
        scales: {
          y: {
            min: -100,
            max: 100,
          }
        },
        plugins: {
          legend: {
            display: false,
          },
          datalabels: {
            anchor: 'start',
            align: '-45',
            clamp: true,
            color: "orange",
          }
        },
        elements: {
          "point": {
            "pointStyle": square_data
          },
        }
      },
    });

  </script>

Charts.js 缩放 yaxes ticks min max 不起作用

Charts.js scales yaxes ticks min max doesnt work

html

javascript

charts

chart.js