javascript - Django 数据到 Google Charts

Question

查看:

def home(request,
    template = 'home.html'):
    if request.user.is_authenticated():
        data = [['jan'],[12],[-12]]

    context = {
        'data' : data,
    }
    return render(
        request, template, context)

模板:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawVisualization);

function drawVisualization() {


  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Month');
  data.addColumn('number');
  data.addColumn('number');

  data.addRows({{ data|safe }});

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
      draw(data,
           {title: "blabla",
            width:600, height:400,
            bar: { groupWidth: '90%' },
            isStacked:"true",
            legend:"none" }
      );

}
</script>

我正在尝试将数组值添加到图表行，但不明白为什么这不起作用。没有绘制图表，但其他一切正常。

总体目标是将模型字段存储在一个数组中，然后用它来绘制图表，如果我不能这样做，那么我将无法继续。

当我在模板中调用 {{ data }} 时，它返回:

[[0], [12], [-12]]

这是错误的格式吗？我如何更改此设置以便 Google Charts 接受它作为行值？

如有任何帮助或指导，我们将不胜感激，

提前致谢

Answer 1

根据代码中的数据表定义，一共有三列...

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number');
data.addColumn('number');

但是从阅读问题来看，听起来你只需要两个......

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number');

要添加单行值，格式应为...

['Month', 0]

要添加所有行，使用addRows，格式应该是...

[
  ['Month',   0],
  ['Month',  12],
  ['Month', -12]
]

在您的 View 上下文中，将 'data' : data 更改为 'data': json.dumps(data)

在 javascript 或 View 中使用 json 是至关重要的。