javascript-Django数据到Google图表

2019-11-18 05:35:05 阅读：213 来源： 互联网

标签：charts google-visualization javascript django

视图：

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-Django数据到Google图表