html - Chart.JS 将最大值和最小值固定到屏幕上的某个位置

Question

我正在处理图表。 js 并且需要固定屏幕上 y 轴上的最小值和最大值，这意味着，例如，最大值始终位于与其他数据输入/值完全相同的位置。

例如，当数组的最大值为 5 时，它会创建一个 yAxis，其中最大级别为 5 并将线(折线图/图表)放置到该位置，但是当新数据数组中的最大值是 2000，那么图表不会跳到 y 轴上的 2000，而是将 2000 值放在数字 5 所在的完全相同的位置，这意味着，最大位置在视觉上是固定的，但不是在数据值方面，相同最低限度。

同时 y 轴必须是动态的/灵活的，因此当一个数据数组插入数字时，例如，介于 10 到 0 之间，它会将折线图放置在视觉上首选的区域，以便始终位于当图表更新为 1000 到 0 或 1000 到 900 之间的数据值而不是 10 到 0 时的同一点。

基本上，如何将折线图始终放置到相同的点区域，但插入不同的值。

无论数据值如何，都需要使线的最大点和最小点始终位于同一位置，而中间的线会改变形状。

当前图表始终有 1 条线在图表上用不同的值更新。

这是最有可能在从数据数组中读取最小值和最大值时使用混合点和最大值来完成的，还是完全不同？

var data1 = [ 1, 9, 12, 3, 15, 8, 2, -5, 3, 4,
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type : 'line',

        // The data for our dataset
        data : {
            labels : [ '', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '' ],
            datasets : [ {
                label : 'My dataset',
                borderWidth : 3,
                borderColor : 'rgb(255,0, 0)',
                data : data1,
            }]
        },

        // Configuration options go here
        options : {
            elements : {
                point : {
                    radius : 3
                }
            },
            legend : {
                labels : {
                    fontColor : "white",
                    fontSize : 18
                }
            },
            scales : {
                yAxes : [ {
                    ticks : {
                        beginAtZero : false,
                    },
                    gridLines : {
                        display : false,
                        drawBorder : false,
                    }
                } ],
                xAxes : [ {
                    ticks : {
                        fontColor : "white",
                        fontSize : 14,
                        beginAtZero : 0,
                    },
                    gridLines : {
                        display : false,
                    }
                } ]
            },
            tooltips : {
                callbacks : {
                    label : function(tooltipItem) {
                        console.log(tooltipItem)
                        return tooltipItem.yLabel;
                    }
                }
            }
        }

    });

    function updateChart() {
        chart.data.datasets[0].data = [ 800, 200, 900, 900, 100, 500, 200, 100, 200 ];
        chart.data.datasets[0].borderColor = '#32a852';
        chart.update();
    }

Answer 1

尝试破坏图表

myLineChart.destroy();

现在调用函数

updateChart()