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

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

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

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

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

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

@linxijiuri 比如这样：

myAppPage.js

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

就这么简单！

@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

连一个完整的例子都没有

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

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

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

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

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

@qq711363 底部的categories标识？

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

@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);

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

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

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

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

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

@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);

};

[图片]

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

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

.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有一点系数