javascript - 使用 Javascript 从 Json 数据创建图表

标签 javascript json charts bar-chart

嘿,我有一个 json 文件,如图所示 (1) 我想使用 javascript(任何库)创建一个像这样的图表(第二张图片)我该怎么做?我想要一个代码简单的例子

image 1

image2

最佳答案

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 
});
<!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>

此外,您可能会发现这个 comparison of JavaScript charting frameworks在考虑您的选择时很有帮助。

完全披露:我是 ZingChart 团队的一员。如果您对快速演示有任何疑问,请告诉我。

关于javascript - 使用 Javascript 从 Json 数据创建图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37899293/

相关文章:

javascript - 在内容脚本收到响应之前阻止上下文菜单启动

javascript - 按钮的onclick函数没有被调用

javascript - 使用 json 的 Highcharts 动态向下钻取

.net - 将字符串参数发送到 WCF 服务会导致反序列化错误

flutter - 如何更改图表的标签颜色

javascript - 绝对 div 在 Google map 上抖动或消失

javascript - 如何使用 JavaScript 在函数上指定源和目标?

javascript - 使用 JSON.stringify 将对象转换为字符串 显示空对象

c# - devexpress XtraChart : Line Chart years in x-axis showing in decimal and unable to set MaxValueInternal for wholerange and visualrange

java - 如何使用Jzy3d java 3d图表库?