javascript-Django数据到Google图表

视图：

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图表能够将其接受为行值？

任何帮助或指示,将不胜感激,

提前致谢

解决方法:

根据代码中的数据表定义,共有三列…

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]
]

在您的视图上下文中,将“ data”：data更改为“ data”：json.dumps(data)

在javascript或视图中使用json至关重要.

标签：charts,google-visualization,javascript,django
来源： https://codeday.me/bug/20191118/2025861.html