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次

请告诉我如何动态地将webapi中的JSON数据绑定到图表？

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

所以你的最终代码是：

＆＃13;

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Zing图表加载webapi Json数据问题

2 个答案: