使用Ajax循环低谷JSON并将值传递给Google图表

Question

我有以下Javascript代码：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">




      google.charts.load('current', {'packages':['controls']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {


       var countryPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control2',
        'options': {
            'filterColumnLabel': 'Targets',
            title: 'Company Performance',
            curveType: 'function',
            legend: { position: 'bottom' },
            'ui': {
                'allowTyping': true,
                'allowMultiple': false,
                'allowNone': false,
            }
        },
            'state': {
            selectedValues: ['1970']
        }
    });




var jsonvalues = $.getJSON("http://localhost:5000/data", function(results) {
        $.each(results, function(index) {
            alert(results[index].key[1]);
        });
    });
$
    var data = google.visualization.arrayToDataTable([
          ['Year','Targets', 'Total targets'],

        {% for info in jsonvalues %}
        ['{{info['key'][1]|safe}}','{{info['key'][0]|safe}}', parseInt('{{info['value']|safe}}')],
        {% endfor %}
        ]);
    var barChart = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
        'containerId': 'curve_chart',
    'options': {
      'width': 800,
      'height': 600,
        },
        'view': {
            'columns': [0, 2]
        }
    });

    var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
    dash.bind(countryPicker, [barChart]);
    dash.draw(data);
}



    </script>
  </head>
  <body>
    <div id="control2"></div>
    <div id="curve_chart" style="width: 1920px; height: 1000px"></div>
  </body>
</html>

我要实现的目标是将通过Ajax调用检索到的getJSON数据从http：// localhost：5000 / data传递到Google图表。

我尝试了很多事情，但到目前为止，我仍然受困，并不真正知道如何实现自己想要的目标。 我只是插入了警报方面作为测试，以查看是否返回了数据。 该警报将我所请求的JSON数据返回给我，所以很好。

我的JSON数据如下所示：

[
    {
    key: [
    "Abortion Related",
    1977
    ],
    value: 4
    },
    {
    key: [
    "Abortion Related",
    1978
    ],
    value: 6
    }
]

Answer 1

回到我昨天遇到的问题，使用以下工作代码解决了该问题：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">




      google.charts.load('current', {'packages':['controls']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {


       var countryPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control2',
        'options': {
            'filterColumnLabel': 'Targets',
            title: 'Company Performance',
            curveType: 'function',
            legend: { position: 'bottom' },
            'ui': {
                'allowTyping': true,
                'allowMultiple': false,
                'allowNone': false,
            }
        },
            'state': {
            selectedValues: ['1970']
        }
    });
 function updateDiv() {
          $(document).ready(function(){

    var data = new google.visualization.DataTable();

  data.addColumn('number', 'Year');
  data.addColumn('string', 'Targets');
  data.addColumn('number', 'Total Targets');

      values = new Array;

      $.getJSON("http://localhost:5000/data", function(results)
      {
          $.each(results, function(index)
          {
                  values.push([results[index].key[1],results[index].key[0],results[index].value]);
              });

          data.addRows(values);

    var barChart = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
        'containerId': 'curve_chart',
    'options': {
      'width': 800,
      'height': 600,
        },
        'view': {
            'columns': [0, 2]
        }
    });

    var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
    dash.bind(countryPicker, [barChart]);
    dash.draw(data);
    });

}); } setInterval(updateDiv, 5000)
}



    </script>
  </head>
  <body>
    <div id="control2"></div>
    <div id="curve_chart" style="width: 1920px; height: 1000px"></div>
  </body>
</html>

首先，我从arrayToDatatable更改为DataTable。 之后，我使用data.addColumn声明了列和数据类型。 然后我将getJSON移到`var数据中。 那对我来说就成功了。 可以在这里找到更多信息： https : //developers.google.com/chart/interactive/docs/reference

使用Ajax循环低谷JSON并将值传递给Google图表

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-12-08 14:43:12

使用Ajax循环低谷JSON并将值传递给Google图表

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-12-08 14:43:12

解决方案1
0 已采纳 2018-12-08 14:43:12