时间戳

首页 > 解决方案 > CanvasJS Chart.js - 如何使axisY具有恒定范围？

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

问题描述

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

下面的代码：

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);

}

标签： javascripthtmlcanvasjs

解决方案

修复了canvasjs的 y 轴最小值和最大值：

maximum:number设置 Axis 上允许的最大值。大于最大值的值将被剪裁。平移图表时最大也设置上限。

默认值：根据数据自动计算

示例：100、350..

注意：如果没有设置最大值，则自动计算。设置最大值时，应注意最大值应大于最小值。

根据您的示例：

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

由于超出范围 (0-100) 的值会被“裁剪”，因此您需要添加一个固定的或算法的最小-最大边界，以使最终用户可以看到已达到或超过该数据值。

推荐阅读