CanvasJS Chart.js - 如何使 axisY 具有恒定范围？

Question

我有一个动态图表，每 100 毫秒左右更新一次数据。我知道我的数字会在 0 到 100 之间变化，但图表会动态地不断重新调整范围。如何保持从 0 到 100 的恒定 Y 轴范围，以便按比例查看所有内容？

代码如下：

function scoreGraphSetup() {
    // Global vars used:
    // scoreBuffer, latestScore
    //var scoreBuffer = []; // dataPoints
    var chart = new CanvasJS.Chart("chartContainer", {
        title :{
            text: "Motion Score (last few seconds)"
        },
        data: [{
            type: "line",
            dataPoints: scoreBuffer
        }],
        axisY: {
            prefix: "",
            suffix: "",
            includeZero: false
            // I need to do something in axisY, right?
        },
    });
    var xVal = 0;
    var yVal = 0; 
    var updateInterval = 100;
    var dataLength = 150; // number of dataPoints visible at any point

    var updateChart = function (count) {
        count = count || 1;
        for (var j = 0; j < count; j++) {
            //yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
            scoreBuffer.push({
                x: xVal,
                y: latestScore // push on the latest analysis score //formerly: yVal
            });
            xVal++;
        }
        if (scoreBuffer.length > dataLength) {
            scoreBuffer.shift();
        }
        chart.render();
    };
    updateChart(dataLength);
    setInterval(function(){updateChart()}, updateInterval);

}

Answer 1

固定 y 轴最小值和最大值来自 canvasjs:

maximum:number Sets the maximum value permitted on Axis. Values greater than maximum are clipped. maximum also set the upper limit while panning chart.

Default: Automatically Calculated based on the data

Example: 100, 350..

Notes: If maximum value is not set, it is automatically calculated. While setting maximum, it should be taken care that maximum should be greater than minimum.

根据你的例子：

 axisY:{
   minimum: 0,
   maximum: 100
 },

由于超出范围 (0-100) 的值被“截断”，因此您希望添加固定的或算法的最小-最大边界，以允许最终用户查看已达到或超过的数据值。

CanvasJS Chart.js - 如何使 axisY 具有恒定范围？

CanvasJS Chart.js - How to make the axisY have constant range?

html

javascript

canvasjs