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

xiaolin3303 · 2016-12-13T07:12:37Z

由于无法获取到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即可。

The text was updated successfully, but these errors were encountered:

zqchong · 2016-12-20T02:33:29Z

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

xiaolin3303 · 2016-12-20T04:51:02Z

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

vueadmin · 2017-01-11T02:18:35Z

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

Bleoo · 2017-01-14T09:04:39Z

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

xiaolin3303 · 2017-01-14T10:02:37Z

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

ghost · 2017-01-15T10:54:54Z

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

xiaolin3303 · 2017-01-15T12:52:16Z

@linxijiuri 比如这样：

myAppPage.js

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

就这么简单！

Bleoo · 2017-01-16T01:35:35Z

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 · 2017-01-16T01:46:16Z

@Bleoo 我知道什么问题了

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

xiaolin3303 · 2017-01-16T01:47:51Z

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

Bleoo · 2017-01-16T01:51:25Z

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

xiaolin3303 · 2017-01-16T01:59:05Z

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

fansfree · 2017-01-17T07:18:24Z

连一个完整的例子都没有

xiaolin3303 · 2017-01-17T07:24:29Z

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

xiaolin3303 · 2017-01-17T07:31:23Z

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

fansfree · 2017-01-17T07:36:16Z

fansfree · 2017-01-17T07:36:47Z

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

xiaolin3303 · 2017-01-17T08:33:07Z

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

qq711363 · 2017-01-19T13:57:49Z

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

xiaolin3303 · 2017-01-20T02:56:25Z

@qq711363 底部的categories标识？

czh628 · 2017-02-20T01:26:40Z

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

EGsnn · 2017-07-06T01:26:50Z

@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 · 2017-08-05T03:29:14Z

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

LongYue9608 · 2017-08-25T08:27:02Z

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

ziclee · 2017-09-09T10:21:30Z

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

EverChisato · 2017-09-14T08:29:59Z

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

xiaolin3303 · 2017-09-14T10:11:03Z

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

TigerMan2 · 2017-09-15T06:21:50Z

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

Joyce0827 · 2018-01-19T02:31:23Z

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

saruagithub · 2018-04-15T02:44:55Z

.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缩放

382229841 · 2018-06-28T01:47:04Z

丛向铺满怎么实现的，用transform:rotate(90deg);在开发者工具可以，到真机就不起作用了。
请指点！

lxhcool · 2018-06-28T02:13:45Z

如何一开始展示最右侧数据，在线等

AI-pig · 2018-07-07T06:32:52Z

自己写一个scrollToEnd函数呗

AI-pig · 2018-07-07T06:35:53Z

Charts.prototype.scrollToEnd = function (categories) {
var points = getXAxisPoints(categories, this.opts, this.config);
var xPoint = points.xAxisPoints;
var eachSpacing = Math.floor(points.eachSpacing / 2);
var currentOffset = 0
if (xPoint && xPoint.length > 3) {
var index = Math.ceil(xPoint.length / 2) - 1;
currentOffset = -(xPoint[index]) - eachSpacing;
}
this.scrollOption.currentOffset = currentOffset;
var _distance = this.scrollOption.distance = 0;
var opts = assign({}, this.opts, {
scrollDistance: currentOffset + _distance,
animation: false
});

drawCharts.call(this, opts.type, opts, this.config, this.context);

}
源码里面加上这代码，代码里面调用下就好了

xiaonan0527 · 2018-07-10T01:37:33Z

@AI-pig 感谢提供代码，但是试了下没效果。。。

13241491189 · 2018-07-31T03:43:30Z

@boreyic 你这个问题解决了吗？

Munjie · 2018-08-03T06:33:34Z

数据显示不完，怎么实现横向滚动查看数据啊

lilingdan · 2018-08-15T17:34:46Z

@boreyic 解决方法是swiper 内置 scrollview 内置 canvas 转成的图片

daodaocheng · 2018-08-16T10:38:25Z

@lilingdan 怎么将canvas上画的图表转成图片呢？

owen0204 · 2018-09-29T15:11:40Z

//进入默认最右边数据，希望帮到大家
Charts.prototype.scrollToEnd = function (categories) {
var points = getXAxisPoints(categories, this.opts, this.config);
var xPoint = points.xAxisPoints;
//var eachSpacing = Math.floor(points.eachSpacing / 2);
var eachSpacing = categories.length < 5 ? 0 : (categories.length - 5) * points.eachSpacing;
var currentOffset = 0
if (xPoint && xPoint.length > 3) {
//var index = Math.ceil(xPoint.length / 2) - 1;
//currentOffset = -(xPoint[index]) - eachSpacing;
currentOffset = - eachSpacing;
}
this.scrollOption.currentOffset = currentOffset;
var _distance = this.scrollOption.distance = 0;
var opts = assign({}, this.opts, {
//注意下面一行scrollDistance前后都有两个下划线，这边发出来显示不出，不加上会不起作用
scrollDistance: currentOffset + _distance,
animation: true
});

drawCharts.call(this, opts.type, opts, this.config, this.context);

};

huanghuade · 2018-11-02T12:38:16Z

[图片]

huanghuade · 2018-11-02T12:38:55Z

怎么让这点的距离压缩啊？

broIcon · 2018-11-08T05:48:42Z

线图能不能自定义指定某条线的颜色呢？

huangguangda · 2018-11-27T02:13:08Z

.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缩放
js.
new wxCharts({
canvasId: 'ringCanvas',
type: 'ring',
legend: false,
extra: {
ringWidth: 15, //圆环的宽度
pie: {
offsetAngle: -45 //圆环的角度
}
},
series: [{
data: res.data.data.normalNum,
}, {
data: res.data.data.beLateNum,
}, {
data: res.data.data.leaveNum,
}, {
data: res.data.data.uncheckedNum,
}],
width: 320,
height: 200,
dataLabel: false
});
wxml.

wxss. .canvas { z-index: 1; position: absolute; left: 64rpx; top: 120rpx; height: 350rpx; } 还是会乱,如何解决?

861977522 · 2019-01-02T03:21:01Z

可以隐藏x轴的坐标值吗

jihuan1123 · 2019-01-15T01:36:44Z

请问一下柱状图怎么可以转变成扇形图，或者怎么做成扇形图啊？求指教

baozideyoumo · 2019-07-10T08:48:47Z

我画圆环在不同手机上适配不是很理想

cfangxx · 2020-03-21T06:08:26Z

一堆bug

raphaelsoul · 2022-03-18T06:26:26Z

自己计算宽高（px）保存在data上后绑定在canvas的style属性上
传给Chart的宽度需要乘一点系数大约是1.0336左右因为rpx和px有一点系数

Mag666 · 2022-03-18T06:26:47Z

邮件已收到，谢谢！

Munjie · 2022-03-18T06:26:50Z

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

xiaolin3303 closed this as completed Dec 15, 2016

xiaolin3303 reopened this Dec 15, 2016

xiaolin3303 mentioned this issue Sep 25, 2017

如何自适应canvas宽度 #172

Closed

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

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

Comments

xiaolin3303 commented Dec 13, 2016

zqchong commented Dec 20, 2016

xiaolin3303 commented Dec 20, 2016

vueadmin commented Jan 11, 2017

Bleoo commented Jan 14, 2017

xiaolin3303 commented Jan 14, 2017

ghost commented Jan 15, 2017

xiaolin3303 commented Jan 15, 2017

Bleoo commented Jan 16, 2017

xiaolin3303 commented Jan 16, 2017

xiaolin3303 commented Jan 16, 2017

Bleoo commented Jan 16, 2017

xiaolin3303 commented Jan 16, 2017

fansfree commented Jan 17, 2017

xiaolin3303 commented Jan 17, 2017

xiaolin3303 commented Jan 17, 2017

fansfree commented Jan 17, 2017

fansfree commented Jan 17, 2017

xiaolin3303 commented Jan 17, 2017

qq711363 commented Jan 19, 2017

xiaolin3303 commented Jan 20, 2017

czh628 commented Feb 20, 2017

EGsnn commented Jul 6, 2017

boreyic commented Aug 5, 2017

LongYue9608 commented Aug 25, 2017

ziclee commented Sep 9, 2017

EverChisato commented Sep 14, 2017 • edited Loading

xiaolin3303 commented Sep 14, 2017

TigerMan2 commented Sep 15, 2017

Joyce0827 commented Jan 19, 2018

saruagithub commented Apr 15, 2018 • edited Loading

382229841 commented Jun 28, 2018

lxhcool commented Jun 28, 2018 • edited Loading

AI-pig commented Jul 7, 2018

AI-pig commented Jul 7, 2018

xiaonan0527 commented Jul 10, 2018

13241491189 commented Jul 31, 2018

Munjie commented Aug 3, 2018

lilingdan commented Aug 15, 2018

daodaocheng commented Aug 16, 2018

owen0204 commented Sep 29, 2018 • edited Loading

huanghuade commented Nov 2, 2018

huanghuade commented Nov 2, 2018

broIcon commented Nov 8, 2018

huangguangda commented Nov 27, 2018

861977522 commented Jan 2, 2019

jihuan1123 commented Jan 15, 2019

baozideyoumo commented Jul 10, 2019

cfangxx commented Mar 21, 2020

raphaelsoul commented Mar 18, 2022

Mag666 commented Mar 18, 2022 via email

Munjie commented Mar 18, 2022 via email

EverChisato commented Sep 14, 2017 •

edited

Loading

saruagithub commented Apr 15, 2018 •

edited

Loading

lxhcool commented Jun 28, 2018 •

edited

Loading

owen0204 commented Sep 29, 2018 •

edited

Loading