amChartsというチャートライブラリを利用している中で、canvas周りの解像度の問題が発生したので備忘録として。
起きていること
- iPhoneでチャートが荒い。
- PCでは荒くない。
修正前
対応内容
amChartsではiOS15以上でcanvasのメモリ制限が課せられたことで安全な解像度に自動的にダウンするオプションがデフォルトで設定されているとのことです。このフラグを折ることで解像度のダウンが発生しなくなります。
const root = am5.Root.new("chartdiv", {
useSafeResolution: false
});
安全な解像度
このセクションでは、useSafeResolution: boolean (default: true)の設定について説明します。この設定は、チャートが自動的に、与えられたデバイスに対して「安全」な解像度を選択することを意味します。
例えば、iOS 15以降では、キャンバスのレンダリングにメモリ制限が課せられており、大きなタブレットや、さらに大きなAppleの携帯電話では、大きなチャートを表示すると、その制限に引っかかり、チャートが効果的に壊れてしまう可能性があることを意味します。
このようなデバイスでは、「安全な解像度」が低下し、この問題が実際のチャート設定に影響を与える可能性を最小限に抑えます。
このような解像度の低減を無効にするには、ルート要素の設定を使用することができます：
修正後
Refs
そしてそもそものcanvasの高解像度対応について勉強になった記事はこちら。
Discussion