Javascript 谷歌图表API-如何传递JSON数据？_Javascript_Html_Json_Charts_Google Visualization

Javascript 谷歌图表API-如何传递JSON数据？

javascript html json charts google-visualization

Javascript 谷歌图表API-如何传递JSON数据？,javascript,html,json,charts,google-visualization,Javascript,Html,Json,Charts,Google Visualization,我试图从网页接收JSON数据，并从GoogleCharts api将其显示为图形。我希望图形是实时的，并在运行时添加数据。请你帮我指出这个阶段的正确方向，因为我的图表甚至不会显示出来 {% block body %} <html> <body> <div id="curve_chart" style="width: 900px; height: 500px"></div> <div id="chart_div">

我试图从网页接收JSON数据，并从GoogleCharts api将其显示为图形。我希望图形是实时的，并在运行时添加数据。请你帮我指出这个阶段的正确方向，因为我的图表甚至不会显示出来

    {% block body %}

<html>
<body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
    <div id="chart_div"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    google.charts.load('current', {
    callback: function () {

    drawChart();
    setInterval(drawChart, 10000);

    function drawChart() {
      $.getJSON({
        url: 'removed',
        type: 'get',
        success: function (json) {
            var data = new google.visualization.DataTable();
            var jsondata2 = $.parseJSON(json);
            //var data = google.visualization.arrayToDataTable($.parseJSON(json));
            data.addColumn('string', 'Date Time');
            data.addColumn('number', 'Temperature');
            data.addRows([
                [jsondata2.datetime, jsondata2.temperature]
            ]);
            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data);
        }
      });

      var options = {
          title: 'Temperature Data',
          curveType: 'none',
          legend: { position: 'bottom' }
        };

    }

    },
        packages: ['corechart']
    });
    </script>
</body>
</html>
{% endblock %}

为什么您的图表分区位于html和head标记之间

<html>
<div id="chart_div"></div>
<head>

应该在正文标记和脚本之间

<body>
   <div id="curve_chart" style="width: 900px; height: 500px"></div>
   <div id="chart_div"></div>
   <script type="text/javascript">
       google.charts.load('current', { .... 
           // change the order
            data.addRows([
                [jsondata2.datetime, jsondata2.temperature]
            ]);
           .....
    </script>
<body>


load（'current'，{。。。。
//改变顺序
data.addRows([
[jsondata2.datetime，jsondata2.temperature]
]);
.....

首先，确保您收到的json使用双引号，
而不是问题中的单引号

{"temperature": 11.0, "datetime": "12-12-12 23-23-23"}

接下来，如果要继续向图表中添加数据，
需要保存对图表和数据表的引用，
在首次加载数据之前，不要每次都创建新数据
否则，您将只绘制每次收到的最后一个点

推荐以下设置

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Date Time');
    data.addColumn('number', 'Temperature');
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    var options = {
      title: 'Temperature Data',
      curveType: 'none',
      legend: { position: 'bottom' }
    };

    drawChart();
    setInterval(drawChart, 10000);

    function drawChart() {
      $.getJSON({
        url: 'output.txt',
        type: 'get'
      }).done(function (jsonData) {
        data.addRows([
          [jsonData.datetime, jsonData.temperature]
        ]);
        chart.draw(data, options);
      }).fail(function (jqXHR, textStatus, errorThrown) {
        console.log(textStatus, errorThrown);
      });
    }
  },
  packages: ['corechart']
});

我提出了你的建议，但它仍然没有改变。根据你的建议，我将两个标记改为，并放入，因为你的另一个代码不起作用。它仍然不起作用…我编辑了答案，顺序是错误的。嗨，jonhid，感谢你的帮助。我将它改为与你的一样，但它仍然不起作用：我的收藏有问题吗关于JSON数据？我对这一切都很陌生，所以这可能是一个问题！JSON的值是什么？嗨，WhiteHat，谢谢你的回答。关于JSON。当我用&.getJSON调用它时，我检查浏览器中的网络选项卡以查看正在检索的数据，它会返回以下内容…这是一种奇怪的html编码：{&'；温度'；：11.0，&'；日期时间&&'；12-12-12 23-23-23'；}url有一个网页，其正文标记为：{‘温度’：11.0，‘日期时间’：‘12-12-12-23-23-23&}我使用了flask和python，并通过网页上的python变量返回了这个结果。我刚刚为您编辑了这个问题。它使用了奇怪的block和endblock标记，我不知道它们用于什么，只是它们可能是flask所必需的？出于某种原因，它没有添加，现在就在那里。只是添加了，并且得到了相同的结果。这真的很奇怪为什么这不起作用…{'；温度'；：11.0，'；日期时间'；-12-12 23-23-23'；}这些奇怪的&#字符也有同样的数据

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Date Time');
    data.addColumn('number', 'Temperature');
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    var options = {
      title: 'Temperature Data',
      curveType: 'none',
      legend: { position: 'bottom' }
    };

    drawChart();
    setInterval(drawChart, 10000);

    function drawChart() {
      $.getJSON({
        url: 'output.txt',
        type: 'get'
      }).done(function (jsonData) {
        data.addRows([
          [jsonData.datetime, jsonData.temperature]
        ]);
        chart.draw(data, options);
      }).fail(function (jqXHR, textStatus, errorThrown) {
        console.log(textStatus, errorThrown);
      });
    }
  },
  packages: ['corechart']
});