微信小程序wx-charts自适应屏幕宽度的问题
xiaolin3303 opened this issue · comments
由于无法获取到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即可。
按您的方法做适配了,整个画布区域全屏了,但是折线图只画出来部分,请帮忙看看
目测来看应该是canvas没有全屏展开，你审查下元素看下是否canvas铺满屏幕了
仪表盘这样的效果能改出来么
按照你给的方法，用你给的折线图代码，底部依然展示不全
能不能给个完整的引用wx-charts的js 文件啊，新手不知道怎么用的，谢谢🙏
@linxijiuri 比如这样：
myAppPage.js
// 路径是wxCharts文件相对于本文件的相对路径
var wxCharts = require('./utils/wxcharts.js');
Page({
...
onLoad: function() {
new wxCharts({
....
});
}
});就这么简单！
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
});@Bleoo 我知道什么问题了
canvas里面的单位只支持px，opts.width, opts.height传入的单位都是px，你的css里面需要设置以px为单位的高度值，这样才能统一起来, 用rdp进行转化会有误差。
@Bleoo 而且你的横向也是截断的，应该是你的canvas并没有横向铺满屏幕，是不是外层有元素设置了padding或者margin，如果要设置间距的话opts.width记得需要把这个间距减掉，当然单位还是px
@xiaolin3303 明白了，可是高度能做到等比缩放吗
@Bleoo 如果css样式统一用rpx单位的话，可以用 750 / wx.getSystemInfoSync().width获得比例， 反算出对应的px为单位的高度，只是一个建议，good luck
连一个完整的例子都没有
上面这样子写，然后完成没有显示的，不知道为什么
饼状图 如何让属性名称不显示
请问形成的图表能不能做到，鼠标或者手指放到曲线上看到每一个点的值的动态效果啊？
@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);
这个和swiper组件一起使用的时候, 绘画出的canvas图像 不随屏幕滑动一起移动,就感觉像是被固定定位了, 请问你们有遇到这个问题吗? (在微信开发者工具里 是正常的 但是手机上就会出现这个问题, 安卓,IOS 都有这个问题.),，我也遇到这个问题
如果使用标签横向滚动，图的宽度可以调整成整个scroll-view的宽度吗？100%没有包括横向滚动的宽度
如何实现图表横向滚动呢？
请问下载的demo里面右边那块灰色区域是因为什么？样式明明是100%；
@EverChisato demo中忘记去掉了background参数，已修复
为什么在视图顶部固定一个tabbar，然后滑动页面时折线图不是隐藏，而是从tabbar上面穿过？
怎么能让那些字跟线条不在最顶层显示呢
.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缩放
丛向铺满怎么实现的， 用transform:rotate(90deg);在开发者工具可以，到真机就不起作用了。
请指点！
如何一开始展示最右侧数据，在线等
自己写一个scrollToEnd函数呗
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);
}
源码里面加上这代码，代码里面调用下就好了
数据显示不完，怎么实现横向滚动查看数据啊
@lilingdan 怎么将canvas上画的图表转成图片呢？
//进入默认最右边数据，希望帮到大家
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);
};
[图片]
怎么让这点的距离压缩啊？
线图 能不能自定义指定某条线的颜色呢？
wxss. .canvas { z-index: 1; position: absolute; left: 64rpx; top: 120rpx; height: 350rpx; } 还是会乱,如何解决?
.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.
可以隐藏x轴的坐标值吗
请问一下柱状图怎么可以转变成扇形图，或者怎么做成扇形图啊？求指教
我画圆环在不同手机上适配不是很理想
一堆bug
自己计算宽高（px）保存在data上后绑定在canvas的style属性上
传给Chart的宽度需要乘一点系数 大约是1.0336左右 因为rpx和px有一点系数
