Блог

Главная - Вопросы по программированию - Как я могу автоматически изменить масштаб оси y моей диаграммы журнала с помощью ChartJS?

Как я могу автоматически изменить масштаб оси y моей диаграммы журнала с помощью ChartJS?

#javascript #chart.js

#javascript #chart.js

Вопрос:

Вот пример одного запуска моей диаграммы:

введите описание изображения здесь

Конфигурация диаграммы:

На данный момент я просто устанавливаю максимальное значение тика, т. Е. max: 100000000 . Я полагаю, мне нужно передать некоторую функцию, которая регулирует максимальное значение всякий раз, когда наибольшее значение превышает наибольшее значение оси y. Как это можно сделать?

 _chart.chart_3.config = {
    type: 'line',
    data: {
        labels: ['Harvest 1', 'Harvest 2', 'Harvest 3', 'Harvest 4','Harvest 5'],
        datasets: [{
            lineTension: 0,
            label: 'Bill',
            data: [],
            fill: false,
            fillColor : "rgba(0, 0, 0, 1)",
            strokeColor : "rgba(0, 0, 0, 1)",
            backgroundColor: "rgb(54, 162, 235)",
            borderColor: "rgb(54, 162, 235)",
        },
        {
            lineTension: 0,
            label: 'Ann',
            data: [],
            fill: false,
            fillColor : "rgba(0, 0, 0, 1)",
            strokeColor : "rgba(0, 0, 0, 1)",
            backgroundColor: "rgb(255, 99, 132)",
            borderColor: "rgb(255, 99, 132)",
        },
        {
            lineTension: 0,
            label: 'Bill (Sharing)',
            data: [],
            fill: false,
            fillColor : "rgba(0, 0, 0, 1)",
            strokeColor : "rgba(0, 0, 0, 1)",
            backgroundColor: "rgb(4, 0, 255)",
            borderColor: "rgb(4, 0, 255)",
        },
        {
            lineTension: 0,
            label: 'Ann (Sharing)',
            data: [],
            fill: false,
            fillColor : "rgba(0, 0, 0, 1)",
            strokeColor : "rgba(0, 0, 0, 1)",
            backgroundColor: "rgb(255, 0, 0)",
            borderColor: "rgb(255, 0, 0)",
        },
        {
            lineTension: 0,
            label: 'Pool',
            data: [],
            fill: false,
            fillColor : "rgba(0, 0, 0, 1)",
            strokeColor : "rgba(0, 0, 0, 1)",
            backgroundColor: "rgb(128,36,171)",
            borderColor: "rgb(128,36,171)",
        }]
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: ''
        },
        tooltips: {
            enabled: false,
            mode: 'index',
            intersect: false,
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true
                }
            }],
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'KG',
                },
                type: 'logarithmic',
                position: 'left',
                ticks: {
                     min: 0, //minimum tick
                     max: newMax(value), //maximum tick
                     callback: function (value, index, values) {
                         return Number(value.toString()); //pass tick values as a string into Number function
                     }
                }
            }]
        }
    }
};

Новая функция max:

 newMax = function(values) {
    max = Math.max(values)
    max = max * 1.2
    return Number(max.toString())
}

Ответ №1:

Я не уверен, как выглядят ваши данные, но я предполагаю, что это массив значений с числами, все, что вам нужно сделать, это найти максимальное число, а затем добавить небольшой буфер в конце, чтобы график выглядел красиво, поэтому максимальное число, к которому он идет, затем добавьтенемного в конце.

 function getMax(arr) {
  const max = Math.max(...arr).toString();
  const newMax = 1   "0".repeat(max.length);
  return newMax
}
  
 max: getMax(values)

Комментарии:

1. Допустим, текущее значение равно 94. Как только он достигнет 100, я хочу, чтобы следующий столбец на оси y показывал 1000. Как только он достигнет 1000, он должен показывать 10000 и так далее, поэтапно, для каждой степени 10.

2. Должно быть Math.ceil(max / 10) * 100 , которое превратило бы 99 в 1000, 999 в 10000 и т.д.

3. Если бы я знал, как получить текущий массив, max: я мог бы его обновить max: Math.ceil((Math.max(values)) / 10) * 100 , но я не уверен, как это сделать. в ChartJS. values похоже, не работает.

4.Я понял, что я очень плох в математике. const max = Math.max(...arr).toString(); const newMax = 1 "0".repeat(max.length); Это должно просто округляться в меньшую сторону и добавлять 0 в конец каждый раз, когда вы поднимаете скобку, так что все, что находится между 1001-9999 и 10000, что вы пытаетесь сделать, должно работать с (...values) not (values)

5. Что такое values или value ? хотя, возможно, вы можете упростить его, просто заставив функцию возвращать максимальное значение, поэтому вам не нужно вставлять его или что-то еще. Я обновил ответ примером