使用Javascript从Json数据创建图表

Bad*_*Gfx 1 javascript charts json bar-chart

嘿,我有一个文件json,你在图像中看到(1)我想创建一个图表像这样(第二个图像)使用javascript(任何库)我怎么能简单地做?我想要一个简单的代码示例

图片1

图像2

Mer*_*ily 5

ZingChart也适用于此用例.这是一个例子:

var myConfig = {
 	type: "bar", 
 			"scale-x":{
		  "values":[
		    "ahbass marrakech",
		    "massira 1 marrakech",
		    "rue laayoune marrakech"
		    ]
		},
	series : [
		{
			values : [2,1,1]
		}
	]
};

zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 400, 
	width: 600 
});
Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html>
	<head>
	<!--Assets will be injected here on compile. Use the assets button above-->
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
		<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
		ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script>
	<!--Inject End-->
	</head>
	<body>
		<div id='myChart'></div>
	</body>
</html>
Run Code Online (Sandbox Code Playgroud)

此外,在考虑您的选项时,您可能会发现JavaScript图表框架的这种比较很有帮助.

完全披露:我在ZingChart团队.如果您对快速演示有任何疑问,请与我们联系.