微信小程序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即可。

[zqchong]

按您的方法做适配了,整个画布区域全屏了,但是折线图只画出来部分,请帮忙看看

[xiaolin3303]

目测来看应该是canvas没有全屏展开，你审查下元素看下是否canvas铺满屏幕了

[vueadmin]

仪表盘这样的效果能改出来么

[Bleoo]

按照你给的方法，用你给的折线图代码，底部依然展示不全

[xiaolin3303]

@Bleoo 把你的信息详细描述一下，是否可以提供一下你的js, wxss相关的代码包括截图

[ghost]

能不能给个完整的引用wx-charts的js 文件啊，新手不知道怎么用的，谢谢🙏

[xiaolin3303]

@linxijiuri 比如这样：

myAppPage.js

// 路径是wxCharts文件相对于本文件的相对路径
var wxCharts = require('./utils/wxcharts.js');
Page({
    ...
    onLoad: function() {
        new wxCharts({
            ....
        });
    }
});

就这么简单！

[Bleoo]

canvas {
    width: 100%;
    height: 200rdp;
}

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

[xiaolin3303]

@Bleoo 我知道什么问题了

canvas里面的单位只支持px，opts.width, opts.height传入的单位都是px，你的css里面需要设置以px为单位的高度值，这样才能统一起来, 用rdp进行转化会有误差。

[xiaolin3303]

@Bleoo 而且你的横向也是截断的，应该是你的canvas并没有横向铺满屏幕，是不是外层有元素设置了padding或者margin，如果要设置间距的话opts.width记得需要把这个间距减掉，当然单位还是px

[Bleoo]

@xiaolin3303 明白了，可是高度能做到等比缩放吗

[xiaolin3303]

@Bleoo 如果css样式统一用rpx单位的话，可以用 750 / wx.getSystemInfoSync().width获得比例， 反算出对应的px为单位的高度，只是一个建议，good luck

[fansfree]

连一个完整的例子都没有

[xiaolin3303]

@fansfree 上面对话我有给一个如何使用的例子，请查看一下，如果还没有解决你的问题请详细描述下

[xiaolin3303]

@fansfree 请参看 #28 如果有问题在这个issue中讨论

[fansfree]

[fansfree]

上面这样子写，然后完成没有显示的，不知道为什么

[xiaolin3303]

@fansfree 请查看 #28 里面有直接能运行的例子

[qq711363]

饼状图 如何让属性名称不显示

[xiaolin3303]

@qq711363 底部的categories标识？

[czh628]

请问形成的图表能不能做到，鼠标或者手指放到曲线上看到每一个点的值的动态效果啊？

[EGsnn]

@qq711363 case 'pie': this.animationInstance = new Animation({ timing: 'easeInOut', duration: duration, onProcess: function onProcess(process) { _this.chartData.pieData = drawPieDataPoints(series, opts, config, context, process); // drawLegend(opts.series, opts, config, context); drawCanvas(opts, context); }, onAnimationFinish: function onAnimationFinish() { _this.event.trigger('renderComplete'); } }); break; 注释掉这一行 // drawLegend(opts.series, opts, config, context);

[boreyic]

这个和swiper组件一起使用的时候, 绘画出的canvas图像 不随屏幕滑动一起移动,就感觉像是被固定定位了, 请问你们有遇到这个问题吗? (在微信开发者工具里 是正常的 但是手机上就会出现这个问题, 安卓,IOS 都有这个问题.),，我也遇到这个问题

[LongYue9608]

如果使用标签横向滚动，图的宽度可以调整成整个scroll-view的宽度吗？100%没有包括横向滚动的宽度

[ziclee]

如何实现图表横向滚动呢？

[EverChisato]

请问下载的demo里面右边那块灰色区域是因为什么？样式明明是100%；

[xiaolin3303]

@EverChisato demo中忘记去掉了background参数，已修复

[TigerMan2]

为什么在视图顶部固定一个tabbar，然后滑动页面时折线图不是隐藏，而是从tabbar上面穿过？

[Joyce0827]

怎么能让那些字跟线条不在最顶层显示呢

[saruagithub]

.chart{ width: 100%; text-align: center; } .canvas{ /* position: absolute; top: 10%; */ width: 100%; height: 600rpx; transform: scale(0.7) } js文件里设置了 width: windowWidth, height: 300, dataLabel: true 开发工具里也显示好了布局，为啥到真机就是乱的？？ 已解决：去掉transform scale缩放