Início / coding / Perguntas / 79115735
Accepted
Ghassan Karwchan
Asked: 2024-10-23 05:06:45 +0800 CST

Como configurar quantos ticks Atualizar para 4 [fechado]

  • 772

Atualizei do ChartJs 2 para o 4. O layout e os ticks ainda não são como antes.

Esta é uma comparação entre a antiga versão 2 (em cima) e a nova versão 4 na parte inferior

insira a descrição da imagem aqui

insira a descrição da imagem aqui

E este é outro exemplo: versão 2 insira a descrição da imagem aqui

versão 4

insira a descrição da imagem aqui

Este é meu código para configuração de gráfico:

options: {
        legend: { display: false },
        responsive: false,
        maintainAspectRatio: false,
        scales: {
          x: {
              type: "time",
              distribution: "timeseries",
              time: { parser: "YYYY-MM-DDTHH:mm", tooltipFormat: "ll" },
              ticks: {
                source: "data",
                maxRotation: 90,
                minRotation: 90,
                autoSkip: false
              }
            },
          y: { ticks: { beginAtZero: true, major: { enabled: true } , autoSkip: false } }
        },
        tooltips: {
          callbacks: {
            label: this.label || defaultLabel
          }
        },
      }

E esta é a configuração compartilhada para cada conjunto de dados Line:

{
data: [],
  backgroundColor: "#2bb2e7",
  borderColor: "#2bb2e7",
  color: '#000',
  fill: false,
  label: "",
  pointRadius: 5,
  pointHoverRadius: 20,
  borderWidth: 3,
  cubicInterpolationMode: 'monotone',
  tension: 0.4
}

a questão é:

Como controlar quantos ticks são exibidos no eixo "Y" (a versão 2 é melhor calculando automaticamente quantos ticks)?

charts

1 respostas

  1. Best Answer

    Você pode ajustar o número de ticks necessários usando stepSizee maxTicksLimit.

    Para referência, verifique a definição aqui:
    https://www.chartjs.org/docs/latest/api/#radialtickoptions

    options: {
  legend: { display: false },
  responsive: false,
  maintainAspectRatio: false,
  scales: {
    x: {
      type: "time",
      distribution: "timeseries",
      time: { 
        parser: "YYYY-MM-DDTHH:mm", 
        tooltipFormat: "ll" 
      },
      ticks: {
        source: "data",
        maxRotation: 90,
        minRotation: 90,
        autoSkip: false
      }
    },
    y: { 
      ticks: { 
        beginAtZero: true, 
        major: { enabled: true }, 
        autoSkip: false,
        stepSize: 5,  // Set the interval for Y-axis ticks
        maxTicksLimit: 100,  // Set the maximum number of ticks displayed
        suggestedMax: 100,  // Suggest the maximum value for Y-axis
        suggestedMin: 0  // Suggest the minimum value for Y-axis
      } 
    }
  },
  tooltips: {
    callbacks: {
      label: this.label || defaultLabel
    }
  },
}
    • 1

relate perguntas