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 ...
随机推荐
- Android 通过onTouchEvent判断是否为双击事件
通过onTouchEvent判断是否为双击事件,通过前面一次up 跟本次down之间的时间差,并且点击的点的坐标偏移来确定是否为双击事件DOUBLE_TAP_TIMEOUT. boolean isMo ...
- Javascript高级编程学习笔记(32)—— 客户端检测(1)能力检测
能力检测 浏览器厂商虽然在实现公共接口方面投入了大量的精力 但是每种浏览器仍旧存在许多差异 为了让网页能跨浏览器的运行,对浏览器差异做的兼容处理自然无法避免 其中最常用的也就是我们现在所说的能力检测 ...
- 转载----开发者大杀器 —— 刨根问底,揪出 Android App 耗电的元凶代码
转载文章地址:http://www.jianshu.com/p/27ba2759b221
- 阿里云申请ssl证书
申请证书(本文以阿里云服务器为背景,申请证书也以阿里云域名申请证书来作为实例) (1)登陆阿里云服务器,初次配置的用户,不建议直接搜索‘ssl证书’进行购买,因为这样购买后证书与域名对应的引导性并不强 ...
- 部署 YApi 接口管理服务
安装 Node curl -sL https://rpm.nodesource.com/setup_8.x | bash - yum install -y nodejs 安装 MongoDB vi / ...
- IDEA中MAVEN项目有多个子目录,如何加载构建
ddts这个项目有三个子目录,每个子目录下面也都有一个 pom.xml 此时需要 右键子目录的 pom.xml,选择Add as Maven Project,在上图中cli.core两个目 ...
- AOP切面实现原理以及多个切面切同一个地方时的优先级讲解
此博文的编写,源于前段时间的惨痛面试经历.刚好近几天尘埃落定.手头事少,遂总结一二,与各位道友分享,欢迎吐槽指正.今年年初的这段面试经历,已于之前的博文中 整理发出(https://www.cnblo ...
- C#生成MD5的方法
///C#生成MD5的方法 public static string GetMD5(string sDataIn) { MD5CryptoServiceProvider md5 = new MD5Cr ...
- Python机器学习笔记:XgBoost算法
前言 1,Xgboost简介 Xgboost是Boosting算法的其中一种,Boosting算法的思想是将许多弱分类器集成在一起,形成一个强分类器.因为Xgboost是一种提升树模型,所以它是将许多 ...
- Mycat - 实现数据库的读写分离与高可用
前言 开心一刻 上语文课,不小心睡着了,坐在边上的同桌突然叫醒了我,并小声说道:“读课文第三段”.我立马起身大声读了起来.正在黑板写字的老师吓了一跳,老师郁闷的看着我,问道:“同学有什么问题吗?”,我 ...