使用 Javascript 从 Json 数据创建图表答案

【问题标题】：Create chart from Json data Using Javascript使用 Javascript 从 Json 数据创建图表
【发布时间】：2016-06-18 16:38:43
【问题描述】：

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

【问题讨论】：

标签： javascript json charts bar-chart

【解决方案1】：

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 团队的一员。如果您对快速演示有任何疑问，请告诉我。

【讨论】：

【解决方案2】：

看看CanvasJS。

这是一个从外部 json 文件渲染图表的例子。

$(document).ready(function() {
  var dataPoints = [];
  $.getJSON("https://api.myjson.com/bins/45rin", function(result) {
    for (var i = 0; i <= result.dataPoints.length - 1; i++) {
      dataPoints.push({
        label: result.dataPoints[i].label,
        y: parseInt(result.dataPoints[i].y)
      });
    }

    var chart = new CanvasJS.Chart("chartContainer", {
      data: [{
        type: "column",
        dataPoints: dataPoints
      }]
    });

    chart.render();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

【讨论】：

【解决方案3】：

Google Charts 是一个很好的 JavaScript 图表/绘图工具，如果你刚刚开始的话。这是我第一次在 JS 中查看图表/图形库时创建的示例。

<html>
    <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
            google.charts.load('current', {'packages':['corechart']});
            google.charts.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                    ['Age', 'Weight'],
                    [8,   12],
                    [4,   5.5],
                    [11,  14],
                    [4,   5],
                    [3,   3.5],
                    [6.5, 7],
                ]);

                var options = {
                    title: 'Age vs. Weight comparison',
                    hAxis: {title: 'Age', minValue: 0, maxValue: 15},
                    vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
                    legend: 'none'
                };

                var chart = new google.visualization.ScatterChart(document.getElementById('chart'));
                chart.draw(data, options);
            }
        </script>
    </head>
    <body>
        <div id="chart" sytle="width:900px;height:500px;"></div>
    </body>
</html>

这会产生以下图表。

您可以使用JSON.parse 从 JSON 文件中获取数据，而不是像我的示例中那样对数据进行硬编码。

【讨论】：