我在stackblitz中準備了這個 - https://stackblitz.com/edit/github-nlvlrr-mwudnj?file=src/app/app.component.ts,src/app/app.component.html,tsconfig.json&preset=node . 在第 16384 個像素未呈現之后,您可以在 Fiffox 中看到所有內容,而在 Chrome 中,圖表正在完全呈現。這是Firefox的限制嗎?是不是可以在那個瀏覽器中渲染更多的像素?因為在畫布最大尺寸表中,他們通常會寫到 firefox 最多可以渲染 32768px。也許我做錯了什么?
Chrome: 在此處輸入影像描述
Firefox: 在此處輸入影像描述
uj5u.com熱心網友回復:
16384 x 2 = 32768
如果您devicePixelRatio
在瀏覽器的控制臺中輸入,您可能會發現2
. 您很可能在高解析度顯示幕上。
在 Ng2-Charts 庫的后臺使用的Chart.js確實有一個可用的devicePixelRatio
選項。它的默認值為window.devicePixelRatio
(dPR),因此如果您沒有明確設定它,庫將自動調整您的畫布大小以匹配此dPR。他們這樣做是因為在這樣的監視器上要有清晰的像素,我們需要將畫布緩沖區設定為監視器像素的實際大小,然后使用 CSS 縮小渲染的畫布。
如果您確實需要將畫布設定為更大的初始值,可以使用此選項將 dPR 限制為 1,例如
lineChartOptions: ChartOptions<'line'> = {
devivePixelRatio: 1,
responsive: true,
...
或者您可以保留默認值并簡單地檢查您找到的有關畫布最大尺寸的表格,但將其除以window.devicePixelRatio
.
轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/506936.html