时间戳

首页 > 解决方案 > 谷歌图表不显示数据

javascript - 谷歌图表不显示数据

问题描述

我有这个模板：

{% block header %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div align="center" style="margin-top:35px;"><a href="/"><button type="button" class="btn btn-primary">Back to latest</button></a></div>
{% endblock %}
{% block body %}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"  style="width: 900px; height: 500px;"><div>


<script type='text/javascript'>//<![CDATA[ 

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

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Currency', 'Rate', { role: 'style' }],
    ['USD', parseFloat({{rates.0}}), 'gold'],
    ['GBP', parseFloat({{rates.1}}), 'silver'],
    ['HKD', parseFloat({{rates.2}}), 'brown'],
    ['AUD', parseFloat({{rates.3}}), 'blue'],
    ['SEK', parseFloat({{rates.1}}), 'red'],
    ['JPY', parseFloat({{rates.2}}), 'yellow'],
    ['NOK', parseFloat({{rates.3}}), 'orange'],
    ['EUR', parseFloat({{rates.3}}), 'orange'],
  ]);



  var options = {
    title: 'Exchange rate overview',
    chartArea: {width: '50%'},
    hAxis: {
      title: '',
      minValue: 0
    },
    vAxis: {
      title: ''
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

  chart.draw(data, options);
}
//]]>  

</script>


{% endblock %}

现在，它向我展示了这个：

它出什么问题了？它应该显示一些带有数据的条，有什么想法吗？

json 数据实际上是顺便提取的，它来自 Django 应用程序。

如果您需要进一步的解释，请告诉我。

未显示数据

标签： javascriptdjangogoogle-visualization

解决方案

推荐阅读