Question

以下是我的图表的一次运行示例：

图表配置：

此刻，我刚刚设置了最大刻度值，即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
                     }
                }
            }]
        }
    }
};

新的最大功能：

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

Answer 1

我不确定您的数据是什么样子，但是我假设它是一个带有数字的值数组，您所需要做的就是找到最大数字，而不是在末尾添加一些缓冲区以保持最大值。图看起来很漂亮，所以它达到的最大数量，然后在末尾添加一点。

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

max: getMax(values)

如何使用ChartJS自动调整日志图表的y轴？

1 个答案: