Charts.js 缩放 yaxes 刻度 min max 不起作用-前端问题

Charts.js scales yaxes ticks min max doesnt work(Charts.js 缩放 yaxes 刻度 min max 不起作用)

本文介绍了Charts.js 缩放 yaxes 刻度 min max 不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I have an HTML page with a charts.js chart that works. I'm trying to set the minimum and maximum values of the chart, but I can't set the minimum and maximum values. I searched different posts but they all say the same, and I'm pretty sure I'm already doing that...

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

我就是想不通怎么回事.

I just cant figure out what's wrong.

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

推荐答案

这是因为您使用 v2 语法和 v3，所有更改请阅读迁移指南，您在选项对象之外定义了比例配置.

That is because you are using v2 syntax with v3, for all changes please read the migration guide and you defined the scale config outside of the options object.

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

In v3 all scales are an object where the key of the object is the ID of the scale

还需要注册数据标签插件才能工作，请参阅脚本块中的第一行.

Also for the datalabels plugin to work you need to register it, see first line in the script block.

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

Last thing dont include 2 major versions of a lib, high chance of giving errors

<!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 刻度 min max 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

问题描述

推荐答案

基础教程推荐