Chart.js缩放平移插件在WKWebView中无法正常工作的问题求助

我给Chart.js图表添加了缩放平移功能，在Chrome和Safari浏览器中正常工作，但嵌入SwiftUI的WKWebView后，图表会像图片一样整体缩放，无法实现坐标轴的正确缩放。

相关代码 #

HTML代码 #

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.2.1/chartjs-plugin-zoom.min.js" integrity="sha512-klQv6lz2YR+MecyFYMFRuU2eAl8IPRo6zHnsc9n142TJuJHS8CG0ix4Oq9na9ceeg1u5EkBfZsFcV3U7J51iew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    </head>
    <body>
        <div id="container" style="position: relative; height:95vh; width:95vw">
            <canvas id="myCanvas"></canvas>
        </div>

        <script>
            //var incomingData = __@data__;
            var ctx = document.getElementById("myCanvas").getContext('2d');
            var gradient = ctx.createLinearGradient(0, 0, 0, 500);
            gradient.addColorStop(0, 'rgba(158,200,62,1)');   
            gradient.addColorStop(1, 'rgba(188,190,50,1)');

            var myChart = new Chart(ctx, {
                type: 'line',

                data: {
                    labels: ["5:30 PM","5:45 PM","6:00 PM","6:15 PM","6:30 PM","6:45 PM","7:00 PM","7:15 PM","7:30 PM","7:45 PM","8:00 PM","8:15 PM","8:30 PM","8:45 PM","9:00 PM","9:15 PM","9:30 PM","9:45 PM","10:00 PM","10:15 PM","10:30 PM","10:45 PM","11:00 PM","11:15 PM","11:30 PM","11:45 PM","12:00 AM","12:00 AM","12:15 AM","12:30 AM","12:45 AM","1:00 AM","1:15 AM","1:30 AM","1:45 AM","2:00 AM","2:15 AM","2:30 AM","2:45 AM","3:00 AM","3:15 AM","3:30 AM","3:45 AM","4:00 AM","4:15 AM","4:30 AM","4:45 AM","5:00 AM","5:15 AM","5:30 AM","5:45 AM","6:00 AM","6:15 AM","6:30 AM","6:45 AM","7:00 AM","7:15 AM","7:30 AM","7:45 AM","8:00 AM","8:15 AM","8:30 AM","8:45 AM","9:00 AM","9:15 AM","9:30 AM","9:45 AM","10:00 AM","10:15 AM","10:30 AM","10:45 AM","11:00 AM","11:15 AM","11:30 AM","11:45 AM","12:00 PM","12:15 PM","12:30 PM","12:45 PM","1:00 PM","1:15 PM","1:30 PM","1:45 PM","2:00 PM","2:15 PM","2:30 PM","2:45 PM","3:00 PM","3:15 PM","3:30 PM","3:45 PM","4:00 PM","4:15 PM","4:30 PM","4:45 PM","5:00 PM"],
                    datasets: [{
                        backgroundColor : gradient, // Put the gradient here as a fill color
                        label: 'Temp',
                        data: [21.62,21.54,21.66,21.39,23,22.31,21.18,21.12,28.18,22.1633333333333333,20.66,20.18,19.7266666666666667,19.35,32.04,30.9533333333333333,33.18,31.9733333333333333,43.035,32.6225,31.7033333333333333,48.32,33.58,33.64,22.37,20.9,20.56,20.56,20.43,20.39,20.25,20,19.87,19.68,19.62,19.5,19.355,19.18,19.06,19,18.87,18.79,18.68,18.68,18.62,18.56,18.5,18.385,18.25,18.12,18,17.91,17.81,17.75,17.62,17.5,17.5,17.5,17.5,18.43,18.68,18.85,19.12,19.25,19.31,19.37,19.43,NaN,NaN,NaN,NaN,19.6,19.68,19.81,19.87,19.9533333333333333,20,NaN,NaN,NaN,NaN,NaN,NaN,NaN,NaN,0,NaN,NaN,NaN,NaN,NaN,NaN,NaN,22.18,22.37,22.31],
                        borderColor: '#9ec83e',
                        borderWidth: '1',
                        fill: true,
                     }]
                },

                options: {
                    plugins: {
                        legend:{
                         display: false,
                        },
                        zoom: {
                            limits: {
                                x: {min: 0, max: 400, minRange: 50},
                                y: {min: 0, max: 200, minRange: 50}
                            },            
                            pan: {
                                enabled: true,
                                mode: 'xy',
                            },
                            zoom: {
                                wheel: {
                                    enabled: true,
                                },
                                pinch: {
                                    enabled: true
                                },
                                mode: 'xy',
                            }
                        }
                    },

                    maintainAspectRatio: false,

                    animation: {
                        duration: 0, // general animation time
                    },
                    elements: {
                        point: {
                            radius: 0
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display:false
                            }
                        },
                        y: {
                            grid: {
                                display:false
                            },
                            ticks: {
                                autoSkip: true,
                                maxTicksLimit: 4
                            }
                        }
                    },
                }
            });

            Chart.register(zoomPlugin);
        </script>
    </body>
</html>

我尝试过的Swift代码 #

wkWebview.scrollView.delegate = self

func viewForZooming(in scrollView: UIScrollView) -> UIView? {
    return nil
}

解决方法 #

1. 彻底禁用WKWebView原生缩放 #

仅设置viewForZooming(in:)返回nil不足以阻止原生缩放，需要锁定scrollView的缩放范围：

wkWebview.scrollView.delegate = self
wkWebview.scrollView.minimumZoomScale = 1.0
wkWebview.scrollView.maximumZoomScale = 1.0
wkWebview.scrollView.bouncesZoom = false

2. 在HTML中添加禁用缩放的meta标签 #

在HTML的<head>内加入以下标签，确保WKWebView不会拦截缩放手势，让Chart.js插件能正常捕获事件：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

3. 调整Chart.js插件注册时机 #

将Chart.register(zoomPlugin)移到图表实例创建之前，保证插件在图表初始化前完成注册：

Chart.register(zoomPlugin);

var myChart = new Chart(ctx, {
  // 图表配置内容
});

内容的提问来源于stack exchange，提问作者Schwarz Software