xiaolin3303 / wx-charts

微信小程序图表库,Charts for WeChat Mini Program
MIT License
4.9k stars 1.68k forks source link

项目中如何具体使用wx-charts #28

Open xiaolin3303 opened 7 years ago

xiaolin3303 commented 7 years ago

myAppPage.js

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

访问wx-charts-demo查看在微信开发工具中直接运行的例子

czh628 commented 7 years ago

请问一下,我想从返回的json数据中,取出数据画出折线图,这个该怎么实现,能给点思路吗?

xiaolin3303 commented 7 years ago

@czh628 把数据处理成wxCharts需要的类型和结构传进去即可

czh628 commented 7 years ago

能给个例子吗,新手还是不太懂呢,谢谢

xiaolin3303 commented 7 years ago

可以查看wx-charts-demo中line.js中如何动态的配置categoriesdata

czh628 commented 7 years ago

在line.js这个文件,怎么处理json文件呢?传到categories和data,网上的很多例子,都是在js文件获取到后直接到wxml显示?

czh628 commented 7 years ago

这个插件能不能同时显示三幅图啊?

xiaolin3303 commented 7 years ago

@czh628 支持同一页面上多个图表的绘制,一个图表调用一次new wxCharts即可

czh628 commented 7 years ago

谢谢。再问下那个曲线上的触摸时显示每个点的值的动画效果可以实现吗?

czh628 commented 7 years ago

曲线的颜色,是在wx-charts 设置好像不行啊,显示没有这个属性?

xiaolin3303 commented 7 years ago

@czh628 请不要在这个issue里讨论其他的问题,如果有新的问题请先查看历史issue里面有没有相关的内容,如果没有请单独针对问题提对应的issue

miaojia90 commented 7 years ago

请问下line绘制的时候,数据较多X轴刻度间隔可以自动控制么,通过什么方式处理呢?

xiaolin3303 commented 7 years ago

@miaojia90 目前是系统自行对X轴做抽稀处理,当然如果你想某些刻度不显示,可以把不需要显示的刻度在categories中对应项设置为空字符串即可

kingrome2017 commented 7 years ago

您好,lineCanvas 的name 我想让它在y轴显示 请问怎么设置

xiaolin3303 commented 7 years ago

@kingrome2017 有没有一个大概的示意图,没太理解意思

CooperWen commented 7 years ago

大佬有没有从Json拿数据做表格的DEMO。我试了一阵试不出来。

CooperWen commented 7 years ago

@czh628 请问你获取Json显示在图表完成了吗。可以分享一下DEMO吗?

MartinQAQ commented 7 years ago

请问line和column可以做成双坐标吗?在Y轴描绘一条竖线

lee0218 commented 6 years ago

现在圆环图的中心是白色的,请问如何给其增加透明度?

JumpyWizard commented 6 years ago

我和上面一些的人一样,我用wx.request的success回调方法中获取到的值,我无法放进图表中。 log显示先走了画图表的方法,后执行了wx.request,可是我明明wx.request方法是写在前面的,(全局变量)猜想因为wx.request是个异步方法。 而如果我在回调方法success中画图表,则图表不显示,这个可能是我哪里写的有问题。 以上可能是我js语法基础不足吧,所以想求一个wx.request获取json并画图表的完整例子。

liukunxiaohuozi commented 6 years ago

数据太多的时候怎么让柱状图溢出显示隐藏,手指左右滑动的时候图表跟随左右滑动呢?

15711358160 commented 6 years ago

柱状图只显示X轴或Y轴,怎么做?????????????????????????????????????

ZhuRuiHeng commented 6 years ago

我一个页面绘制3个图表,直方图会报错,雷达图和饼状图不报错,动态数据报错,静态数据就不报错,在线等,急急急

havebear commented 6 years ago

请问饼图显示数据只能为百分比吗?

449241526 commented 6 years ago

若有3个图,怎么分别控制呢,比如左右滑动的时候,怎么设置才能让3个图不相互影响,各滑动各的

hjskevin commented 6 years ago

我把canvas设置了垂直水平居中,为什么在canvas里绘制的图表没有跟着canvas走,要么偏移了,要么就特别小。

weiweiyue commented 6 years ago

@xiaolin3303 大神 请问数据量过大 用的SrcollLine 可以使x轴不做抽稀处理么

songfenzhe commented 6 years ago

@JumpyWizard 请问您的问题解决了吗,我也遇到这个问题了。

ZhuRuiHeng commented 6 years ago

解决了,你遇到什么问题了

在 2018-04-23 13:51:16,"Zihao Li" notifications@github.com 写道:

@JumpyWizard 请问您的问题解决了吗,我也遇到这个问题了。

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

songfenzhe commented 6 years ago

@ZhuRuiHeng 您能给一个调用接口后,绘制图表的demo吗?我总是失败。QQ773596053

mryuyangli commented 6 years ago

曲线图怎样使用tooltip动态加载数据

fangming666 commented 6 years ago

你好,我在使用的时候把数据缓存进了起来,但是再次取缓存绘制图标的时候会出现图表不显示,请问是什么原因呢?

KeepGoDerek commented 5 years ago

你好,在小程序里一个页面同时创建两个图表,高度超出手机屏幕,在真机上不能上下滑动,这个是什么原因呀?应该怎么解决呢?

xyzdata commented 5 years ago

good to go!

yijiajia commented 5 years ago

@JumpyWizard 您好,请问您的问题解决了吗,我也遇到这个问题了。。。

huangguangda commented 5 years ago

这个在真机上预览的时候会跟着左右滑动,这个环形会跳转第二个页面,第一个页面的这个环也会跟着变动位置,不会固定,如何解决呢? 问题: https://bbs.csdn.net/topics/392482361

huangguangda commented 5 years ago

.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; } 还是会乱,如何解决?

rankleZ commented 4 years ago

第二次传入空数据怎么清掉第一次传入的数据显示的饼状图?

chenyanqing commented 4 years ago

早点支持bar类型的图啊

FireChow commented 4 years ago

请问可以将 label 直接显示在饼图上吗?比如饼图有五六个label,都得在下面找什么颜色,然后再回到图上看对应的值,比较影响用户体验

bestvayne commented 4 years ago

请问,在支付宝小程序中如何使用呢?和在微信小程序中一样吗?

jiangji1 commented 4 years ago

图标在可以拖动的情况下,外层不要是scroll-view,不然bindtouchstart="touchHandler" bindtouchmove="moveHandler" bindtouchend="touchEndHandler"中.getCurrentDataIndex(e)都获取不到index