Question

嘿，我在图像中看到了一个文件json（1）我想创建一个图表像这样（第二个图像）使用javascript（任何库）我怎么能做到这一点？我想要一个代码简单的例子

Answer 1

ZingChart也适用于此用例。这是一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

此外，在考虑您的选择时，您可能会发现此comparison of JavaScript charting frameworks有用。

完全披露：我是ZingChart团队的成员。如果您对快速演示有任何疑问，请与我们联系。

Answer 2

查看CanvasJS。

以下是从外部json文件渲染图表的示例。

＆＃13;

$(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();
  });
});

＆＃13;

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

＆＃13;

Answer 3

使用Google并搜索＆＃34; Chart JS＆＃34;。结果示例：

Answer 4

如果您刚入门，

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文件中获取数据，而不是像我的示例中那样对数据进行硬编码。

使用Javascript从Json数据创建图表

4 个答案: