如何設置Y軸上顯示的最高值的下限？

我有一個chart.js線圖，Y值是從0到100的百分比，X軸代表過去一分鐘的時間（以秒爲單位）。該圖表使用來自套接字連接的實時數據每五秒更新一次。如何設置Y軸上顯示的最高值的下限？

我遇到了一個問題，Y軸步驟是由chart.js動態生成的。大多數情況下，一切都很好，Y軸根據當前顯示的數據範圍進行縮放。但是，當百分比爲0％或當它在0和1之間時，例如.654％時，Y軸將顯示最小值0和最大值1％。因此，該圖表具有誤導性，因爲看起來百分比很高，實際上低於1％。

所以我的問題：如何設置爲最大值最小值沿Y軸顯示的？

（現在，在您跳出結論並放下一行關於stepSize屬性之前，我曾嘗試將stepSize設置爲像1和3這樣的值。問題是，當百分比值跳到75％或更高時，所需的大量標籤（75/3或75/1）最終導致標籤難以辨認）

來源

2016-11-29 John McGowan

貌似你試圖減少「噪音」，在圖中，當值較低。 – Charlie

您正在尋找y軸的suggestedMax刻度選項。使用這樣的：

options: { 
    scales: { 
    yAxes: [{ 
     ticks: { 
     suggestedMax: 60 
     } 
    }] 
    } 
}

該刻度值將被用作y軸的最大刻度，條件是所有數據值都低於此。如果數據值高於此刻度值，則會自動計算並使用較高的刻度值。從docs：

suggestedMax

用戶定義的最大的尺度數，除了如果它是大於最大值低替代最大值。

你可能會看到它在行動here及以下。

var ctx = document.getElementById("myChart"); 
 
var myChart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
 
    datasets: [{ 
 
     label: 'Percentage', 
 
     data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0] 
 
    }] 
 
    }, 
 
    options: { 
 
    scales: { 
 
     yAxes: [{ 
 
     ticks: { 
 
      suggestedMax: 60 
 
     } 
 
     }] 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
 
<canvas id="myChart" width="400" height="400"></canvas>

來源

2016-11-29 23:15:41 xnakos

非常感謝！那就是訣竅 –

如何設置Y軸上顯示的最高值的下限？

回答

相關問題