wx-charts 微信小程序图表 -- radarChart C# .net .ashx 测试

本文介绍了一个使用wxCharts绘制雷达图的实例,包括客户端JavaScript代码、服务器端C#代码及微信小程序请求过程。通过实例展示了如何从服务器获取图表数据并动态更新雷达图。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

 

转载于:https://www.cnblogs.com/lanyubaicl/p/9141224.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值