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 ...
随机推荐
- MySQL索引优化看这篇文章就够了!
阅读本文大概需要 5 分钟. 来源:cnblogs.com/songwenjie/p/9410009.html 本文主要讨论MySQL索引的部分知识.将会从MySQL索引基础.索引优化实战和数据库索引 ...
- Metasploit Framework(3)Meterpreter
文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 Meterpreter:是一种高级的,动态的,可拓展的 ...
- 神经网络(BP)算法Python实现及简单应用
首先用Python实现简单地神经网络算法: import numpy as np # 定义tanh函数 def tanh(x): return np.tanh(x) # tanh函数的导数 def t ...
- spring中的mybatis的sqlSession是如何做到线程隔离的?
项目中常常使用mybatis配合spring进行数据库操作,但是我们知道,数据的操作是要求做到线程安全的,而且按照原来的jdbc的使用方式,每次操作完成之后都要将连接关闭,但是实际使用中我们并没有这么 ...
- Linux rpm包安装不了
有时候会发现安装rpm包时会报错,解决办法: 到rpm包所在目录执行 createrepo -v ./ 这个命令 然后会生成一个repodate这个目录,然后在进行安装rpm就可以了!
- 解决Java中There is no getter for property XXX'XXX' in 'class XXX'的问题
当你出现There is no getter for property XXX'XXX' in 'class XXX'时, 就是在你的这个类中没有找到你这个属性. 检查两个地方 1.你的返回值类型是否 ...
- 音频格式RAW和PCM区别和联系
定义: RAW:在一些外国品牌的播放机中名为 BitSream,我们通常称为“源码”.意义是把光盘上的音频格式不加处理地.“原汁原味”地从同轴和光纤输出.这就要求用户的功放具备这种音频格式的解码功能 ...
- 一文了解Python中的循环(for while break continue 嵌套循环...)
循环 目标 程序的三大流程 while 循环基本使用 break 和 continue while 循环嵌套 01. 程序的三大流程 在程序开发中,一共有三种流程方式: 顺序 —— 从上向下,顺序执行 ...
- django- Vue.js 操作
安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 安装 vue.js cnpm install -g vue- ...
- Android--Activity中使用Intent传值
Intent,又称为意图,是一种运行时绑定机制,它能在程序运行的过程中链接两个不同的组件(Activity.Service.BroadcastReceiver).通过Intent,程序可以向Andro ...