Canvas JS图表开发：如何将特定格式字符串转换为数组对象？

看你的问题，是在通过AJAX加载Canvas JS图表数据时，遇到了非标准格式字符串转数组对象的问题对吧？我来帮你搞定这个～

首先明确核心问题：你拿到的目标字符串[{ label: "BSP", y: 3 },{ label: "BJP", y: 10 }]属于JavaScript对象字面量，但不是标准JSON——JSON语法强制要求所有对象的键必须用双引号包裹，这也是直接用JSON.parse会报错的原因。

下面给你两种解决方案，优先推荐最优方案，后端无法修改时再用前端处理方案：

方案1：让后端返回标准JSON（最优选择） #

如果能控制后端接口，直接让后端把图表数据以标准JSON数组的形式返回，而不是字符串。比如让接口返回的html结构改成：

[{"question":"Lorem ipsum","title":"Poll Result","result":[{"label":"BSP","y":3},{"label":"BJP","y":10}]}]

这样前端代码会非常简洁，直接提取数据就能用：

jQuery.ajax({ 
  url: baseurl+"api/", 
  data: postData, 
  type: 'POST', 
  success: function(html) { 
    var poll_result = JSON.parse(html); 
    var chartData = poll_result[0].result; // 直接拿到可用的标准数组
    
    // 用数据渲染Canvas JS图表
    var chart = new CanvasJS.Chart("chartContainer", {
      data: [{
        type: "column", // 替换成你需要的图表类型
        dataPoints: chartData
      }]
    });
    chart.render();
  }
});

这个方案最安全省心，完全避免前端字符串处理可能带来的各种异常。

方案2：前端处理非标准字符串（后端无法修改时使用） #

如果后端没法调整返回格式，我们可以通过字符串替换把非标准格式转换成标准JSON，再进行解析。

修改你的AJAX成功回调代码如下：

jQuery.ajax({ 
  url: baseurl+"api/", 
  data: postData, 
  type: 'POST', 
  success: function(html) { 
    var poll_result = JSON.parse(html); 
    // 假设返回的第一个对象的result字段是你的目标字符串
    var rawString = poll_result[0].result;
    
    // 给所有未加双引号的键（比如label、y）添加双引号，转换成标准JSON格式
    var validJSONString = rawString.replace(/([a-zA-Z0-9_]+):/g, '"$1":');
    
    try {
      // 解析成标准数组对象
      var chartData = JSON.parse(validJSONString);
      
      // 渲染Canvas JS图表
      var chart = new CanvasJS.Chart("chartContainer", {
        data: [{
          type: "column",
          dataPoints: chartData
        }]
      });
      chart.render();
    } catch (e) {
      console.error("数据解析出错：", e);
      // 这里可以添加错误处理逻辑，比如显示默认图表或提示用户
    }
  }
});

代码说明： #

• replace(/([a-zA-Z0-9_]+):/g, '"$1":')：通过正则匹配所有符合标识符规则的键（如label:、y:），替换为带双引号的标准JSON键格式。
• 加入try-catch是为了防止字符串存在其他格式问题导致解析失败，避免页面崩溃。

内容的提问来源于stack exchange，提问作者Sanjay Goswami