ChartJS xAxis時間格式不會在幾天內發生變化

我有一個ChartJS圖表，可及時顯示數據。ChartJS xAxis時間格式不會在幾天內發生變化

我使用以下時間格式：

displayFormats: { 
    millisecond: 'mm:ss', 
    second: 'mm:ss', 
    minute: 'HH:mm', 
    hour: 'HH:mm', 
    day: 'MMM DD', 
    week: 'MMM DD', 
    month: 'YYYY MMM', 
    quarter: 'YYYY MMM', 
    year: 'YYYY', 
}

我讓用戶從多個選項中進行選擇：

最後一小時
最後一天
上週
最後月

在做'最後一小時'時，輸出效果很好。使用minute

在做Last Day，輸出還是不錯的。使用hour

在做Last Week時，輸出非常差。我甚至嘗試9天，但它再次使用hour

，並顯示出它不是在小時「卡住」，做了一個月的時候，輸出是不錯的。使用day。

現在，雖然我明白爲什麼它是（就是了標籤的量，所以它關係到小時有多個標籤比天），我不知道如何解決它。

我希望本週能顯示day格式。有什麼辦法可以通過ChartJS實現？

我不確定這會有幫助，但是我爲每個屏幕顯示的數據點數量不盡相同，並且可能是5,000 - 50,000，並且也未提前知道。

紅利令人厭煩的是，在右側，由於創建的步驟數量多，它有時會在標籤頂部創建標籤。有沒有辦法解決這個問題？

來源

2017-08-07 Amit

你可以設置這表明該樣品小提琴？要特別瞭解您的圖表配置和輸入數據。 –

可以使用unit屬性強制您希望xAxis使用的單位。例如，如果你想它來顯示它在幾天而不是幾個小時，你可以用一個類似配置方面：

var chart = new Chart(ctx, { 
    type: 'line', 
    data: data, 
    options: { 
     scales: { 
      xAxes: [{ 
       time: { 
        unit: 'day', 
        displayFormats: { 
         day: 'MMM DD' 
        } 
       } 
      }] 
     } 
    } 
});

另一種方法是使用minUnit，而不是unit。這將確保您的圖形更好地擴大，因爲它會限制使用的最低顯示格式，並且在需要時仍然靈活地使用更大的格式。

關於您的重疊標籤問題，調整unitStepSize屬性可能會有所幫助。在ChartJS文檔的Time Units Section

更多信息

來源

2017-08-15 20:21:07

這太好了。它不會實時改變，所以我不能只爲它切換設備，但如果我事先確定它就可以工作。因此，這解決了這個問題，現在我只是想知道如何重新加載圖表選項，而無需重新加載整個圖表。 – Amit

ChartJS xAxis時間格式不會在幾天內發生變化

回答

相關問題