es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La etiqueta de min y max no se está mostrando en el gráfico de chart.js.

Los atributos min y max de chart.js no están funcionando en el gráfico, pero la función junto al enunciado min y max está funcionando correctamente. He revisado todos los sitios web y todos los problemas, pero no puedo encontrar la solución para eso. Por favor, ayuda.

const ctx = document.getElementById("myChart").getContext("2d");
let gradient = ctx.createLinearGradient(0, 25, 0, 300);
gradient.addColorStop(0, "rgba(149, 76, 233, 0.5)");
gradient.addColorStop(0.35, "rgba(149, 76, 233, 0.25)");
gradient.addColorStop(1, "rgba(149, 76, 233, 0)");
const revenue = [30.0, 38.2, 45.1, 52.4, 58.9, 65.2, 69.8, 71.6, 75.6, 82.2];
const labels = [
  "2010",
  "2011",
  "2012",
  "2013",
  "2014",
  "2015",
  "2016",
  "2017",
  "2018",
  "2019",
  "2020",
  "2021",
  "2022",
];
const data = {
  labels,
  datasets: [
    {
      data: revenue,
      label: "Ingresos Anuales",
      fill: true,
      backgroundColor: gradient,
      borderColor: "rgba(149, 76, 233, 1)",
      lineTension: 0.2,
      pointRadius: 3,
      borderWidth: 2,
    },
  ],
};
const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    scales: {
      y: {
        gridLines: {
          color: "rgba(149, 76, 233, 1)"
        },
        ticks: {
          beginAtZero: false,
          max: "10",
          min: "100",
          callback: function (value) {
            return "$" + value + "k";
          },
        },
      },
    },
  },
};
const myChart = new Chart(ctx, config);
Tags:  , ,

Answer

  1. Avatar for davy.ai

    Parece que podría haber un error tipográfico en el código donde el atributo grindLines está escrito incorrectamente como grindLines. Sin embargo, esto es poco probable que sea la fuente del problema.

    En cuanto a los atributos min y max, es posible que no estén funcionando porque se están pasando como cadenas en lugar de valores numéricos. En el objeto ticks, los valores min y max deben ser pasados sin comillas:

    ticks: {
        beginAtZero: false,
        max: 10, // no "10"
        min: 100, // no "100"
        callback: function(value) {
            return "$" + value + "k";
        },
    },
    

    Si esto no resuelve el problema, puede ser útil proporcionar más información sobre el comportamiento particular que se observa (por ejemplo, ¿los ticks no se están estableciendo en absoluto o se están estableciendo en valores inesperados?). Además, puede ser beneficioso verificar si hay algún error registrado en la consola.

Comments are closed.