微信小程序wx-charts自适应屏幕宽度的问题

[xiaolin3303]

由于无法获取到canvas的大小尺寸，故图表工具需要调用者传入width和height来主动告知。

各类终端的屏幕大小有差异，如何来让wx-charts自适应屏幕的尺寸呢，下面给出一种方法。

比如我们的需求是图表横向铺满屏幕的宽度

wxss

.canvas {
    width: 100%;
    height: 200px;
}

wxml

<view>
    <canvas canvas-id="wxChartCanvas" class="canvas"></canvas>
</view>

js

// 调用API getSystemInfoSync 获取设备信息
// 这里使用同步获取，也可以使用异步方式 getSystemInfo

......

let windowWidth = 320;
try {
    let res = wx.getSystemInfoSync();
    windowWidth = res.windowWidth;
} catch (e) {
    // do something when get system info failed
}
new Charts({
    ...
    width: windowWidth,
    height: 200
});

同样的，如果需求中canvas与屏幕有一定的间距，还是先获取屏幕的宽度然后减去间距等计算出画布的实际宽度、高度传递给wx-charts即可。

[Munjie]

这是来自QQ邮箱的假期自动回复邮件。您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。