谷歌图表与不同的Json文件

Google Charts with different Json files

本文关键字：Json 文件 谷歌      更新时间：2023-09-26

有了各种不同的Json文件编写方法，我想了解更多关于如何编写它们以及如何在谷歌图表中使用它们的信息。

首先，我开始制作和使用以下Json：

[
{
  "Voetballer" : "Christiano Ronaldo",
  "Jaar_2010" : 79000000.00,
  "Jaar_2011" : 79700000.00,
  "Jaar_2012" : 80000000.00,
  "Jaar_2013" : 79500000.00,
  "Jaar_2014" : 80000000.00,
  "Jaar_2015" : 81000000.00
},
{
  "Voetballer" : "Lionel Messi",
  "Jaar_2010" : 55500000.00,
  "Jaar_2011" : 60000000.00,
  "Jaar_2012" : 61500000.00,
  "Jaar_2013" : 62000000.00,
  "Jaar_2014" : 63000000.00,
  "Jaar_2015" : 64700000.00
}

（只是Json的一部分）

我借助谷歌的图表API和以下代码制作了一张图表：

<script type="text/javascript">                 
                google.load("visualization", "1", {packages:["corechart"]});
                google.setOnLoadCallback(drawChart);
                function drawChart() 
                {
                    $.getJSON('voetbal.json', function(data) 
                    {
                        var dataTable = new google.visualization.DataTable();
                        dataTable.addColumn('string', 'jaar');
                            $.each(data, function(key, value) 
                            {
                                dataTable.addColumn('number', value.Voetballer);
                            });
                        count=0;
                            $.each(data[0], function(key, value) 
                            {
                                if (key != "Voetballer")
                                {
                                    dataTable.addRows(1);
                                    var Year = key.split("_");
                                    dataTable.setValue(count, 0, Year[1]);
                                    count++;
                                }
                            });

                        count=1;
                            $.each(data, function(i, object) 
                            {
                                teller=0;
                                $.each(data[i], function(key, value) 
                                {
                                    if (key != "Voetballer")
                                    {
                                        dataTable.setValue(teller, count, value);
                                        teller++;
                                    }
                                });
                            count++;
                            });

                            var options = 
                            {
                            colors : ['#8bbe24','#344d59','#d1ceb2','#c95338','#fcc800','#00a0e9','#601986','#e4ebe5'],
                            title : " Top earnings ",
                            seriesType: 'bars',
                            legend: {position: 'right'},
                            series: {11: {type: 'line'}}
                            };
                            var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
                            chart.draw(dataTable, options);


                    });
                }
            </script>


</head>
<body>
    <div id="visualization"></div>
</body>

这个图表非常好用！所以我想转到另一个Json文件，一开始创建一个正确的文件，它变成了这个：

[
{
    "round1": [
        {
            "playerA": 62,
            "playerB": 98,
            "playerC": 97,
            "playerD": 94,
            "playerE": 96
        }
    ]
},
{
    "round2": [
        {
            "playerA": 77,
            "playerB": 40,
            "playerC": 41,
            "playerD": 99,
            "playerE": 76
        }
    ]
}

（一直持续到第10轮）我怎么不能用以前图表中的代码让这个Json文件工作，所以我把Json改成了这个：

[
{
    "round": 1 [
        {
            "playerA": 62,
            "playerB": 98,
            "playerC": 97,
            "playerD": 94,
            "playerE": 96
        }
    ]
},

我希望这会让它变得更容易，但我似乎只管理一个空屏幕，没有错误。

希望有人能给我指明正确的方向，或者向我展示我做错了什么，我对Json文件的了解一般都很有限。我只是觉得我可以使用以前的代码，主要更改一些名称，并能够使用几乎相同的代码。

简而言之，我的问题是：我如何使用我用谷歌图表制作的第二个Json文件？使用我曾经制作过的代码更容易吗？还是因为Json文件不同而从头开始？如果是，请告诉我如何/指引我正确的方向。所有这些Json的东西都令人困惑=）

问题是您更改了JSON文件的数据结构。第一个JSON文件是一个对象数组[｛obj1｝，｛obj2｝…]，第二个JSON文件则是一个具有数组作为值的键的对象数组[{obj1:[array1]}，{obj2:[array2]}…]。两者都是完全有效的JSON格式，但API只能呈现第一种格式下的数据。请参阅此文档以了解您应该如何为谷歌图表准备数据。

https://developers.google.com/chart/interactive/docs/basic_preparing_data

相关文章：