显示带有JSON数据的图表

Question

我正在尝试显示带有放入JSON文件中的信息的图表

这是我的控制器的重要部分：

Map<String, Integer> map = new HashMap<String, Integer>();
for(int i = 0; i<l.size(); i++) {
            number.add(myService.numberItemsByType(l.get(i).getId()));
            map.put(l.get(i).getName(), number.get(i));
        }
ObjectMapper objectMapper = new ObjectMapper();
objectMapper.writeValue(new File("/home/Projects/MyApp/target/items.json"), map);

我已验证json文件正确。

问题是我无法从json导入页面中的数据。

页面：

 <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();

        data.addColumn('string', 'items');
        data.addColumn('number', 'numberItems');

        //data.addRows([
          //['Item 1', 3],
          //['Item 2', 1],
          //['Item 3', 1],
          //['Item 4', 1],
          //['Item 5', 2]
        //]);



        //I have to import the data from the json





        // Set chart options
        var options = {'title':'Chart's title',
                       'width':750,
                       'height':400};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);




      }
    </script>

带有下一个代码：

data.addRows([
          //['Item 1', 3],
          //['Item 2', 1],
          //['Item 3', 1],
          //['Item 4', 1],
          //['Item 5', 2]
        //]);

该应用程序显示了一个图表，但是我需要从json文件中导入数据（因为项目可以更改）

编辑

    <!--Load the AJAX API-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script th:inline="javascript">
  //<![CDATA[
    google.charts.load('current', {
        packages:['corechart']
      }).then(function () {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'items');
        data.addColumn('number', 'numberItems');

        //I get the map with de values from the controller
        var mapa = [[${map}]];

        var options = {
          'title':'title',
          'width':750,
          'height':400
        };



     // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(mapa);

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

        chart.draw(data, options);

      });



    //]]> 
    </script>

现在，我已经在Javascript中获得了数据，但是却得到“表没有列”。在视图中...

编辑2

 <!--Load the AJAX API-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script th:inline="javascript">
  //<![CDATA[
    google.charts.load('current', {
        packages:['corechart']
      }).then(function () {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'items');
        data.addColumn('number', 'numberItems');

        //var x = [[${keylist}]];
        //var y = [[${valuelist}]];

        var mapa =[[${map}]]

        for (var key in mapa) {
          if (mapa.hasOwnProperty(key)) {
            data.addRow([
              key,
              mapa[key]
            ]);
          }
        }



        var options = {
          'title':'title',
          'width':750,
          'height':400
        };



     // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(mapa);

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

        chart.draw(data, options);

      });



    //]]> 
    </script>