Zing图表加载webapi Json数据问题

debugcn 发表于 Dev

阿伦

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

样本数据是这样的

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

但是ZingChart期望这些值是..

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

（值中没有引号*）

由于这个原因，图表中显示了2到3次，因此在UI中获得了不同的输出

您能否让我知道如何将来自webapi的JSON数据绑定到动态图表？

阿卡什·瑞安（Akash Ryan）

您必须使用以下命令在方括号[]之前和之后替换引号：

    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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。