Zingchart load web api Json 数据问题

Question

我正在尝试使用从 Webapi 检索到的 JSON 数据加载 Zingchart。

样本数据是这样的

$scope.testValues = [{"text":"Sample1","values":"[465]"},{"text":"Sample2","values":"[288]"}];

但 ZingChart 期望值是..

[{"text":"Sample1","values":[465]},{"text":"Sample2","values":[288]}];

（值中没有引号*）

因此在 UI 中得到不同的输出，因为图表显示了 2 或 3 次

你能告诉我如何将 JSON 数据从 webapi 动态绑定到图表吗？

Answer 1

这只是数据格式的问题。您可以看到 values 数组是像 "[458]" 这样引用的字符串，我认为它来自 php?

它来自哪里并不重要，这不是数组的有效类型。它是一个带括号的字符串，所以它当然显示为 NAN。

可能有更好的方法来解决问题，但这行得通

1) 测试一下： console.log(JSON.parse(JSON.stringify($scope.testValues)))

2) $scope.testValues = JSON.parse(JSON.stringify($scope.testValues))

Answer 2

您必须使用以下方式替换方括号[]前后的引号：

    var eventlist = JSON.stringify(testValues);
    var eventstring = new String();
    eventstring = eventlist.replace(/"\[/g, '[');
    eventstring = eventstring.replace(/\]"/g, ']');

所以你的最终代码是：

  var testValues = [{"text":"Sample1","values":"[465]"},{"text":"Sample2","values":"[288]"}];
  var eventlist = JSON.stringify(testValues);
  var eventstring = new String();
  eventstring = eventlist.replace(/"\[/g, '[');
  eventstring = eventstring.replace(/\]"/g, ']');
    
var myConfig = {
  type: 'pie', 
 series: JSON.parse(eventstring)
};

zingchart.render({ 
 id: 'myChart', 
 data: myConfig, 
 height: '100%', 
 width: '100%' 
});

html, body {
 height:100%;
 width:100%;
 margin:0;
 padding:0;
}
#myChart {
 height:100%;
 width:100%;
 min-height:150px;
}
.zc-ref {
 display:none;
}

<!DOCTYPE html>
<html>
 <head>
  <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
 </head>
 <body>
  <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
 </body>
</html>

Zingchart load web api Json 数据问题

Zing chart load webapi Json data Issue

zingchart