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'); } }) },