Chartjs scales yaxes ticks min max 不起作用答案

【问题标题】：Charts.js scales yaxes ticks min max doesnt workChartjs scales yaxes ticks min max 不起作用
【发布时间】：2021-10-29 16:55:36
【问题描述】：

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

> 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>

【问题讨论】：

标签： javascript html charts chart.js

【解决方案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>

【讨论】：