wx-charts 微信小程序图表 -- radarChart C# .net .ashx 测试
radarChart:原始代码
- new wxCharts({
- canvasId: 'radarCanvas',
- type: 'radar',
- categories: ['1', '2', '3', '4', '5', '6'],
- series: [{
- name: '成交量1',
- data: [90, 110, 125, 95, 87, 122]
- }],
- width: 320,
- height: 200,
- extra: {
- radar: {
- max: 150
- }
- }
- });
C#:服务器关键代码:
- public void ProcessRequest(HttpContext context)
- {
- context.Response.ContentType = "text/plain";
- StringBuilder sb = new StringBuilder();
- sb.Append("{");
- sb.Append("\"XCXArray\":");
- sb.Append("[");
- sb.Append("{");
- sb.Append("\"canvasId\": \"radarCanvas\", ");
- sb.Append("\"type\": \"radar\", ");
- sb.Append(" \"categories\":[\"1\", \"2\", \"3\", \"4\", \"5\", \"6\"], ");
- sb.Append(" \"series\": [{ ");
- sb.Append("\"name\": \"成交量1\", ");
- sb.Append("\"data\": [90, 110, 125, 95, 87, 122] ");
- sb.Append("}], ");
- sb.Append("\"width\": 320, ");
- sb.Append("\"height\": 200 ");
- sb.Append("}");
- sb.Append("]");
- sb.Append("}");
- context.Response.Write(sb.ToString());
- }
JS:关键代码
- /**
- * 生命周期函数--监听页面加载
- */
- onLoad: function (options) {
- var that = this;
- /*
- 这个地方非常重要,重置data{}里数据时候setData方法的this应为
- 以及函数的this, 如果在下方的sucess直接写this就变成了wx.request()
- 的this了 url: 'http://comsn.cn/Msm/HerNeo.ashx',
- */
- wx.request({
- url: 'http://localhost:51887/HandlerTest.ashx', //访问服务器 URL
- data: {
- 'TypeID': "0",
- 'ImageID': '',
- 'Name': ''
- },
- method: 'POST',
- header: {
- 'content-type': 'application/x-www-form-urlencoded'
- },
- success: function (res) {
- var dddf = res.data.XCXArray; // 获取 Charts 参数
- that.setData({
- XCXArray: res.data
- })
- console.log(dddf);
- console.log(dddf[0].series[0].name);
----------------------------------------------------------
------- 配置 Charts 参数 参数- new wxCharts({
- canvasId: dddf[0].canvasId,
- type: dddf[0].type,
- categories: dddf[0].categories,
- series: [{
- name: dddf[0].series[0].name,
- data: dddf[0].series[0].data
- }],
- width: dddf[0].width,
- height: dddf[0].height,
- extra: {
- radar: {
- max: 150
- }
- }
- });
------------------------------------------------------- },
- fail: function (res) {
- console.log('submit fail');
- },
- complete: function (res) {
- console.log('submit complete');
- }
- })
- },
wx-charts 微信小程序图表 -- radarChart C# .net .ashx 测试的更多相关文章
- 微信小程序图表插件 - wx-charts
微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个. wx-c ...
- 微信小程序~下拉刷新真机测试不弹回的处理办法
问题描述: 下拉刷新在手机上不会自动回弹,开发工具可以 解决办法: 主动调用wx.stopPullDownRefresh /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDow ...
- 微信小程序开发 [05] wx.request发送请求和妹纸图
1.wx.request 微信小程序中用于发起网络请求的API就是wx.request了,具体的参数太多,此处就不再一一详举了,基本使用示例如下: wx.request({ url: 'test.ph ...
- [转]微信小程序联盟 跳坑《一百八十一》设置API:wx.openSetting使用说明
本文转自:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=4066 这个API解决了过去一个长久以来无法解决的问题,如何让用户重 ...
- 微信小程序开源项目库汇总
最近做了一个微信小程序开源项目库汇总,里面集合了OpenDigg 上的优质的微信小程序开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 ...
- 微信小程序开源项目库集合
UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wema ...
- 微信小程序一:微信小程序UI组件、开发框架、实用库
作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/8079095.html 内容持续更新,维护中 邮箱 ...
- 微信小程序基础之开源项目库汇总
awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. (链接:ht ...
- 微信小程序UI组件、开发框架、实用库...
UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wema ...
随机推荐
- redis info 详解
# Server(服务器信息)redis_version:3.0.6 #redis服务器版本redis_git_sha1:00000000 ...
- 【spring】task 任务调度(定时任务)
1.定时任务的几种实现可以看这里:http://gong1208.iteye.com/blog/1773177 2.需要导入spring的jar包,可以参看之前的[spring]相关文章 3.这里使用 ...
- System.net.mail.smtpException;服务器提交了协议冲突 服务器响应为:
最近发邮件遇到问题. 主机godaddy 端口 25,80 都可以用 stmp服务器地址:smtpout.secureserver.net 不支持ssl 我就吧 EnableSsl 设置为false了 ...
- Asp.Net Core Web Api图片上传(一)集成MongoDB存储实例教程
Asp.Net Core Web Api图片上传及MongoDB存储实例教程(一) 图片或者文件上传相信大家在开发中应该都会用到吧,有的时候还要对图片生成缩略图.那么如何在Asp.Net Core W ...
- python中使用xlrd、xlwt和xlutils3操作Excel
简单试了下python下excel的操作,使用了xlrd.xlwt和xlutil3:xlrd可以实现excel的读取操作,xlwt则是写入excel操作,xlutils3主要是为了修改excel,简单 ...
- Python GUI之tkinter窗口视窗教程大集合(看这篇就够了)
一.前言 由于本篇文章较长,所以下面给出内容目录方便跳转阅读,当然也可以用博客页面最右侧的文章目录导航栏进行跳转查阅. 一.前言 二.Tkinter 是什么 三.Tkinter 控件详细介绍 1. T ...
- Mybatis解析mapper
众所周知,接口是不能被实例化的,但是日常开发中,我们经常能直接使用dao层对象的方法,这又是为什么呢. 带着这些问题,我们看下mybatis内部做了那些操作. Mapper解析 上文我们描述了myba ...
- Java 容器 & 泛型:五、HashMap 和 TreeMap的自白
Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket Java 容器的文章这次应该是最后一篇了:Java 容器 系列. 今天泥瓦匠聊下 Maps. 一.Ma ...
- Android UI(二)DridView的菜单
Jeff Lee blog: http://www.cnblogs.com/Alandre/ (泥沙砖瓦浆木匠),retain the url when reproduced ! Thanks ...
- Chapter 4 Invitations——3
Edward was never surrounded by crowds of curious by standers eager for his firsthand account. Edward ...