Блог

Используя chart.js 3.x , как разделить ось Y на равное количество шагов, которое не должно превышать общее количество трех шагов.

Пример диаграммы,
я установил размер шага, который разделит ось Y на три равных шага, но он игнорируется.
https://jsfiddle.net/0awxe539/3/

 Step size calculation: 
stepSize = ((Math.abs(min)   max) / 2); 
 

Я хочу, чтобы ось Y была разделена максимум на три равных шага.
Если min is 0 и max is 0.5 , то на диаграмме должны быть шаги 0 , 0.25 и 0.5 .

Добавление maxTicksLimit:3 имеет некоторое случайное поведение, и иногда я вижу только 2 тика, а не три.

Кроме того, данные моей диаграммы являются динамическими, и я вычисляю и обновляю минимальный, максимальный и размер шага во время выполнения.

Я думаю, вы не можете использовать как maxTicksLimit, так и stepsize вместе. Один из способов решить эту проблему — объявить данные перед конфигурацией и вычислить размер шага там. Затем вы можете поместить оттуда значения max, min и stepsize. Я также использовал fixedStepSize .

 let data =[
    {x:1, y:0.49},
  {x:2, y:0.6},
  {x:3, y:-0.18},
  {x:4, y:0.76},
  {x:5, y:0.48},
  {x:6, y:0.76},
  {x:7, y:0.1},
  {x:8, y:-0.24},
  {x:9, y:0.34},
  {x:10, y:0.42},
  {x:11, y:0.79},
  {x:12, y:-0.21}
]

let values = data.map(item => item.y)
let min = Math.min(...values)
let max = Math.max(...values)
let stepSize = ((Math.abs(min)   max) / 2); 

var config = {
  type: 'scatter',
  data: {
    datasets: [{
      label: "My First dataset",
      backgroundColor: chartColors.red,
      borderColor: chartColors.red,
      showLine: true,
      data: data,
      lineTension: 0,
      fill: false,
    },]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Line Chart'
    },
    tooltips: {
      mode: 'label',
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      xAxes: {
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Test'  
        },
        ticks:
        {
            min: 1,
            max:17,
            stepSize: 5,
        },
        distribution: 'linear',
      },
      yAxes: {
        display: true,
        beginAtZero: true,
        type: 'linear',
        max: max,
        min: min,
        ticks: {
          fontColor: "#ffffff",
          stepSize: stepSize,
          fixedStepSize:stepSize,
        },
        scaleLabel: {
          display: true,
          labelString: 'Value'
        }
      }
    }
  }
};