使用 Javascript 從 Json 數據創建圖表

Question

嘿，我有一個文件 json，如您在圖像中看到的那樣 (1) 我想使用 javascript（任何庫）創建一個像這樣（第二個圖像）的圖表，我該怎么做？ 我想要一個簡單的代碼示例

圖 1

圖像2

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

另外，在考慮選項時，您可能會發現JavaScript圖表框架的這種比較很有幫助。

全面披露：我在ZingChart團隊中。 如果您對快速演示有任何疑問，請告訴我。

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

Answer 3

使用Google並搜索“ Chart JS”。 結果示例：

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 數據創建圖表

問題描述

3 個解決方案

解決方案1
5 2016-06-20 15:15:39

解決方案2
3 2016-06-20 06:00:06

解決方案3
0 2016-06-18 16:42:13

解決方案4
0 2016-06-18 16:51:44

使用 Javascript 從 Json 數據創建圖表

問題描述

3 個解決方案

解決方案1 5 2016-06-20 15:15:39

解決方案2 3 2016-06-20 06:00:06

解決方案3 0 2016-06-18 16:42:13

解決方案4 0 2016-06-18 16:51:44

解決方案1
5 2016-06-20 15:15:39

解決方案2
3 2016-06-20 06:00:06

解決方案3
0 2016-06-18 16:42:13

解決方案4
0 2016-06-18 16:51:44